一. 需求分析

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

3、在course_pic保存图片成功后方可查询课程图片信息。
通过查询course_pic表数据则查询到某课程的图片信息。

二. 服务端开发

1. 模型类

package com.xuecheng.framework.domain.course;import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;import javax.persistence.*;
import java.io.Serializable;@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;}

2. API

在课程管理服务中要提供保存课程图片的api。
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

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

3. Dao

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\ CoursePicRepository.java

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

4. Service

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\ CourseService.java

//向课程管理数据添加课程与图片的关联信息
@Transactional
public ResponseResult addCoursePic(String courseId, String pic) {//课程图片信息CoursePic coursePic = null;//查询课程图片Optional<CoursePic> picOptional = coursePicRepository.findById(courseId);if(picOptional.isPresent()){coursePic = picOptional.get();}if(coursePic == null){coursePic  = new CoursePic();}coursePic.setPic(pic);coursePic.setCourseid(courseId);coursePicRepository.save(coursePic);return new ResponseResult(CommonCode.SUCCESS);
}

5. Controller

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\ CourseController.java

@Override
@PostMapping("/coursepic/add")
public ResponseResult addCoursePic(@RequestParam("courseId") String courseId, @RequestParam("pic")String pic) {return courseService.addCoursePic(courseId,pic);}

三. 前端开发

1. API

文件位置：xc-ui-pc-teach\src\module\course\api\course.js

//保存课程图片地址到课程数据库
export const addCoursePic= (courseId,pic) => {return http.requestPost(apiUrl+'/course/coursepic/add?courseId='+courseId+"&pic="+pic)
}

2. 页面

文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue

1). 添加上传成功的钩子 :on-success=“handleSuccess”

<el-uploadaction="/api/filesystem/upload"list-type="picture-card":before-upload="setuploaddata":on-success="handleSuccess":file-list="fileList":limit="picmax":on-exceed="rejectupload":before-remove="handleRemove":data="uploadval"name="multipartFile"><i class="el-icon-plus"></i>
</el-upload>

2). 在钩子方法 中保存课程图片信息

  //上传成功的钩子方法handleSuccess(response, file, fileList){console.log(response)//   alert('上传成功')//调用课程管理的保存图片接口，将图片信息保存到课程管理数据库course_pic中//从response得到新的图片文件的地址if(response.success){let fileId = response.fileSystem.fileId;courseApi.addCoursePic(this.courseid,fileId).then(res=>{if(res.success){this.$message.success("上传图片成功")}else{this.$message.error(res.message)}})}},//上传失败执行的钩子方法handleError(err, file, fileList){this.$message.error('上传失败');//清空文件队列this.fileList = []},