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

1.2.4前端开发 
前端需要在上传图片成功后保存课程图片信息。 
1.2.4.1 Api方法 

//添加课程图片
export const addCoursePic
=
(courseId,pic)
=
> {
return http
.requestPost(apiUrl+
'
/course/coursepic/add?courseId
=
'
+courseId+
"
&pic
=
"
+pic)
}

1.2.4.2 页面 
1）添加上传成功的钩子 :on-success="handleSuccess" 
 

<el
‐
upload
action=
"
/api/filesystem/upload
"
list
‐
type
=
"
picture
‐
card
"
:on
‐
success
=
"
handleSuccess
"
>
<i class
=
"
el
‐
icon
‐
plus
"
></i>
</el
‐
upload>

2）在钩子方法 中保存课程图片信息 
如果保存图片失败则上传失败，清除文件列表。

//上传成功的钩子方法
handleSuccess(response, file, fileList){
console.log(response)
if(response.success){
//alert(
'
上传成功
'
)
//图片上传成功将课程图片地址保存到课程数据库
let pic
= response.fileSystem.filePath
courseApi.addCoursePic(this.courseid,pic)
.then((res)
=
> {
if(res.success){
this.
$message.success(
'
上传成功
'
);
}else{
this.handleError()
}
});
}else{
this.handleError()
}
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.
$message.error(
'
上传失败
'
);
//清空文件队列
this.fileList
=
[]
}

4 图片查询 
1.3.1 需求分析 
课程图片上传成功，再次进入课程上传页面应该显示出来已上传的图片。 
1.3.2 API 
在课程管理服务定义查询方法

@ApiOperation(
"
获取课程基础信息
"
)
public CoursePic findCoursePic(String courseId);

1.3.2 课程管理服务开发 
1.3.2.1Dao 
使用CoursePicRepository即可，无需再开发。 
1.3.2.2 Service
根据课程id查询课程图片

public CoursePic findCoursepic(String courseId) {[/size][/font]
[font=微软雅黑][size=3]return coursePicRepository
.findOne(courseId);
}

1.3.2.3 Controller

@Override
@GetMapping(
"
/coursepic/list/{courseId}
"
)
public CoursePic findCoursePic(@PathVariable(
"
courseId
"
) String courseId) {
return courseService.findCoursepic(courseId);
}

1.3.3 前端开发 
1.3.3.1API方法

//查询课程图片
export const findCoursePicList
=
courseId
=
> {
return http
.requestQuickGet(apiUrl+
'
/course/coursepic/list/
'
+courseId)
}

1.3.3.2页面 
在课程图片页面的mounted钩子方法 中查询课程图片信息，并将图片地址赋值给数据对象 
1、定义图片查询方法

//查询图片
list(){
courseApi.findCoursePicList(this.courseid)
.then((res)
=
> {
console.log(res)
if(res.
pic){
let name
=
'
图片
'
;
let url =
this.imgUrl+res.
pic;
let fileId
= res.courseid;
//先清空文件列表，再将图片放入文件列表
this.fileList
=
[]
this.fileList.
push({name:name,url:url,fileId:fileId});
}
console.log(this.fileList);
});
}

2）mounted钩子方法 
在mounted钩子方法中调用服务端查询文件列表并绑定到数据对象。

mounted(){
//课程id
this.courseid
=
this.
$route.
params.courseid;
//查询图片
this.list()
}

1.3.3.3测试 
测试流程： 
1、上传图片成功 
2、进入上传图片页面，观察图片是否显示