5 课程图片删除
1.4.1 需求分析
课程图片上传成功后，可以重新上传，方法是先删除现有图片再上传新图片。
注意：此删除只删除课程数据库的课程图片信息，不去删除文件数据库的文件信息及文件系统服务器上的文件，由 于课程图片来源于该用户的文件库，所以此图片可能存在多个地方共用的情况，所以要删除文件系统中的文件需要 到图片库由用户确认后再删除。
1.4.2API
在课程管理服务添加删除课程图片api：
[AppleScript] 纯文本查看 复制代码 @ApiOperation("删除课程图片")
public ResponseResult deleteCoursePic(String courseId);
1.4.3课程管理服务端开发 1.4.2.1 Dao
CoursePicRepository父类提供的delete方法没有返回值，无法知道是否删除成功，这里我们在 CoursePicRepository下边自定义方法：
[AppleScript] 纯文本查看 复制代码 //删除成功返回1否则返回0
long deleteByCourseid(String courseid);
1.4.2.2 Service
[AppleScript] 纯文本查看 复制代码 //删除课程图片
@Transactional
public ResponseResult deleteCoursePic(String courseId) {
//执行删除，返回1表示删除成功，返回0表示删除失败
long result = coursePicRepository.deleteByCourseid(courseId);
if(result>0){
return new ResponseResult(CommonCode.SUCCESS);
}
return new ResponseResult(CommonCode.FAIL);
}
1.4.2.3 Controller
[AppleScript] 纯文本查看 复制代码 @Override
@DeleteMapping("/coursepic/delete")
public ResponseResult deleteCoursePic(@RequestParam("courseId") String courseId) {
return courseService.deleteCoursePic(courseId);
}
1.4.3 前端开发 1.4.3.1 API 调用
[AppleScript] 纯文本查看 复制代码 //删除课程图片 export const deleteCoursePic= courseId => {
return http.requestDelete(apiUrl+'/course/coursepic/delete?courseId='+courseId)
}
1.4.3.2 页面测试
1）before-remove钩子方法
在upload组件的before-remove钩子方法 中实现删除动作。
[AppleScript] 纯文本查看 复制代码 <el‐upload
action="/filesystem/upload"
list‐type="picture‐card" :before‐remove="handleRemove">
<i class="el‐icon‐plus"></i> </el‐upload>
before-remove说明：删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
定义handleRemove方法进行测试： handleRemove 返回true则删除页面的图片，返回false则停止删除页面的图片。
[AppleScript] 纯文本查看 复制代码 //删除图片 handleRemove(file, fileList) {
console.log(file)
alert('删除成功')
return true;
｝
1.4.3.3 promise异步调用
在handleRemove方法调用删除图片的api方法，删除成功时return true，删除失败时return false;
[AppleScript] 纯文本查看 复制代码 //删除图片
handleRemove(file, fileList) {
console.log(file) //
alert('删除') //
return true;
//删除图片
courseApi.deleteCoursePic('1').then((res) => {
if(res.success){
this.$message.success('删除成功');
return true;
}else{
this.$message.error(res.message);
return false;
}
});
},
在上边代码中将提交的课程id故意写错，按照我们预期应该是删除失败，而测试结果却是图片在页面上删除成功。
问题原因：
通过查询deleteCoursePic方法的底层代码，deleteCoursePic最终返回一个promise对象。
Promise是ES6提供的用于异步处理的对象，因为axios提交是异步提交，这里使用promise作为返回值。 Promise的使用方法如下：
Promise对象在处理过程中有三种状态： pending：进行中
resolved：操作成功 rejected: 操作失败 Promise的构建方法如下：
[AppleScript] 纯文本查看 复制代码 const promise = new Promise(function(resolve,reject){
//...TODO...
if(操作成功){
resolve(value);
}else{
reject(error);
} })
上边的构造方法function(resolve,reject)执行流程如下： 1）方法执行一些业务逻辑。 2）如果操作成功将Promise的状态由pending变为resolved，并将操作结果传出去
3）如果操作失败会将promise的状态由pending变为rejected，并将失败结果传出去。
上边说的操作成功将操作结果传给谁了呢？操作失败将失败结果传给谁了呢？
通过promise的then、catch来指定
[AppleScript] 纯文本查看 复制代码 promise.then(function (result) {
console.log('操作成功：' + result); }); promise.catch(function (reason) {
console.log('操作失败：' + reason); });
例子如下：
1、定义一个方法，返回promise对象
[AppleScript] 纯文本查看 复制代码 testpromise(i){
return new Promise((resolve,reject)=>{
if(i % 2==0){
resolve('成功了')
}else{
reject('拒绝了')
}
}) }
2、调用此方法
向方法传入偶数、奇数进行测试。
[AppleScript] 纯文本查看 复制代码 this.testpromise(3).then(res=>{//在then中对成功结果进行处理
alert(res) }).catch(res=>{//在catch中对操作失败结果进行处理
alert(res) })
3、最终将handleRemove方法修改如下 handleRemove方法返回promise对象，当删除成功则resolve，删除失败则reject。
[AppleScript] 纯文本查看 复制代码 //删除图片
handleRemove(file, fileList) {
console.log(file)
return new Promise((resolve,reject)=>{
//删除图片
courseApi.deleteCoursePic(this.courseid).then((res) => {
if(res.success){
this.$message.success('删除成功');
resolve()//通过
}else{
this.$message.error(res.message);
reject()//拒绝
}
});
})
}
| 
收藏
淘帖
踩
