学成在线 第8天 讲义-课程图片管理 分布式文件系统五

5 课程图片删除 
1.4.1 需求分析 
课程图片上传成功后，可以重新上传，方法是先删除现有图片再上传新图片。 
注意：此删除只删除课程数据库的课程图片信息，不去删除文件数据库的文件信息及文件系统服务器上的文件，由 
于课程图片来源于该用户的文件库，所以此图片可能存在多个地方共用的情况，所以要删除文件系统中的文件需要到图片库由用户确认后再删除。
1.4.2API 
在课程管理服务添加删除课程图片api：

@ApiOperation(
"
删除课程图片
"
)
public ResponseResult deleteCoursePic(String courseId);

1.4.3课程管理服务端开发 
1.4.2.1 Dao 
CoursePicRepository父类提供的delete方法没有返回值，无法知道是否删除成功，这里我们在CoursePicRepository下边自定义方法：

//删除成功返回1否则返回0
long deleteByCourseid(String courseid);

1.4.2.2 Service

//删除课程图片
@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

@Override
@DeleteMapping(
"
/coursepic/delete
"
)
public ResponseResult deleteCoursePic(@RequestParam(
"
courseId
"
) String courseId) {
return courseService.deleteCoursePic(courseId);
}

1.4.3 前端开发 
1.4.3.1 API 调用

//删除课程图片
export const deleteCoursePic
=
courseId
=
> {
return http
.requestDelete(apiUrl+
'
/course/coursepic/delete?courseId
=
'
+courseId)
}

1.4.3.2 页面测试 
1）before-remove钩子方法
在upload组件的before-remove钩子方法 中实现删除动作。 
 

<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则停止删除页面的图片。 
 

//删除图片
handleRemove(file, fileList) {
console.log(file)
alert(
'
删除成功
'
)
return true;
｝

1.4.3.3 promise异步调用 
在handleRemove方法调用删除图片的api方法，删除成功时return true，删除失败时return false;

//删除图片
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的构建方法如下：

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来指定 

promise.then(function (result) {
console.log(
'
操作成功：
'
+ result);
});
promise.catch(function (reason) {
console.log(
'
操作失败：
'
+ reason);
});

例子如下： 
1、定义一个方法，返回promise对象

testpromise(i){
return new Promise((resolve,reject)
=
>{
if(i % 2==
0){
resolve(
'
成功了
'
)
}else{
reject(
'
拒绝了
'
)
}
})
}

2、调用此方法 
向方法传入偶数、奇数进行测试。

this.testpromise(3)
.then(res
=
>{//在then中对成功结果进行处理
alert(res)
})
.catch(res
=
>{//在catch中对操作失败结果进行处理
alert(res)
})

3、最终将handleRemove方法修改如下 
handleRemove方法返回promise对象，当删除成功则resolve，删除失败则reject。

//删除图片
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()//拒绝
}
});
})
}