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

1.1.3 上传课程图片前端 
1.1.3.1 需求 
上传图片界面如下图：
 
1.1.3.2 页面 
使用Element-UI的Upload上传组件实现上边的效果。
1) template

<el
‐
upload
action=
"
/filesystem/upload
"
list
‐
type
=
"
picture
‐
card
"
:before
‐
upload
=
"
setbusinesskey
"
:on
‐
success
=
"
handleSuccess
"
:file
‐
list
=
"
fileList
"
:limit
=
"
picmax
"
:on
‐
exceed
=
"
rejectupload
"
:data
=
"
uploadval
"
>
<i class
=
"
el
‐
icon
‐
plus
"
></i>
</el
‐
upload>

el-upload参数说明：
action：必选参数，上传的地址 
list-type：文件列表的类型（text/picture/picture-card）
before-upload：上传前执行钩子方法 ，function(fifile)
on-success：上传成功 执行的钩子方法 ，function(response, fifile, fifileList)
on-error：上传失败的钩子方法，function(err, fifile, fifileList)
on-remove：文件删除的钩子方法，function(fifile, fifileList)
fifile-list：文件列表，此列表为上传成功 的文件
limit：最大允许上传个数 
on-exceed：文件超出个数限制时的钩子，方法为：function(fifiles, fifileList)
data：提交上传的额外参数，需要封装为json对象，最终提交给服务端为key/value串

2)数据模型

<script>
import
*
as sysConfig from
'
@/../config/sysConfig
'
;
import
*
as courseApi from
'
../../api/course
'
;
import utilApi from
'
../../../../common/utils
'
;
import
*
as systemApi from
'
../../../../base/api/system
'
;
export default {
data() {
return {
picmax:1,
courseid:
''
,
dialogImageUrl:
''
,
dialogVisible: false,
fileList:[],
uploadval:{filetag:
"
course
"
},
imgUrl:sysConfig
.imgUrl
}
},
methods: {
//超出文件上传个数提示信息
rejectupload(){
this.
$message.error(
"
最多上传
"
+this.
picmax+
"
个图片
"
);
},
//在上传前设置上传请求的数据
setuploaddata(){
},
//删除图片
handleRemove(file, fileList) {
console.log(file)
alert(
'
删除
'
)
},
//上传成功的钩子方法
handleSuccess(response, file, fileList){
console.log(response)
alert(
'
上传成功
'
)
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.
$message.error(
'
上传失败
'
);
//清空文件队列
this.fileList
=
[]
}
},
mounted(){
//课程id
this.courseid
=
this.
$route.
params.courseid;
}
}
</script>

1.1.3.3 测试 
1、点击“加号”测试上传图片。 

 
3 保存课程图片 
1.2.1 需求分析 
图片上传到文件系统后，其它子系统如果想使用图片可以引用图片的地址，课程管理模块使用图片的方式是将图片地址保存到课程数据库中。
业务流程如下： 
1、上传图片到文件系统服务 
2、保存图片地址到课程管理服务 
在课程管理服务创建保存课程与图片对应关系的表 course_pic。

 
3、在course_pic保存图片成功后方可查询课程图片信息。
通过查询course_pic表数据则查询到某课程的图片信息。
1.2.2 课程管理服务端开发 
1.2.2.1 API 
课程管理需要使用图片则在课程管理服务中要提供保存课程图片的api。

@ApiOperation(
"
添加课程图片
"
)
public ResponseResult addCoursePic(String courseId,String pic);

1.2.2.2 Dao 
模型：

@Data
@ToString
@Entity
@Table(name
=
"
course_pic
"
)
@GenericGenerator(name
=
"
jpa
‐
assigned
"
, strategy
=
"
assigned
"
)
public class CoursePic implements Serializable {
private static final long serialVersionUID =
‐
916357110051689486L;
@Id
@GeneratedValue(generator =
"
jpa
‐
assigned
"
)
private String courseid;
private String pic;
}

API如下：

public interface CoursePicRepository extends JpaRepository<CoursePic, String> {
}

1.2.3.3 Service

//添加课程图片
@Transactional
public ResponseResult saveCoursePic(String courseId,String pic){
//查询课程图片
Optional<CoursePic> picOptional =
coursePicRepository
.findById(courseId);
CoursePic coursePic
= null;
if(picOptional.isPresent()){
coursePic
=
picOptional.
get();
}
//没有课程图片则新建对象
if(coursePic
== null){
coursePic
= new CoursePic();
}
coursePic.setCourseid(courseId);
coursePic.setPic(pic);
//保存课程图片
coursePicRepository
.save(coursePic);
return new ResponseResult(CommonCode.SUCCESS);
}

1.2.3.4 Controller

@Override
@PostMapping(
"
/coursepic/add
"
)
public ResponseResult addCoursePic(@RequestParam(
"
courseId
"
) String courseId,
@RequestParam(
"
pic
"
) String pic) {
//保存课程图片
return courseService.saveCoursePic(courseId,pic);
}