SpringBoot+Vue+ElementUI实现图片和表单一起上传

整体思路（这个实现方法可以避免同一张图片的重复上传）

1. 首先将图片上传至服务器，并且后端上传图片的方法返回图片的url。
2. 前端在回传图片方法中接收传回来的url，并将其中的图片名称赋值给实体类的图片属性。
3. 在上传图片的那一刻前端实体类的图片属性已经有后端传过来的值了，所以此时提交表单信息，后端接收请求把信息保存到数据库就可以了。

1.首先将图片上传至服务器，并且后端上传图片的方法返回图片的url。 此处使用了Element的el-upload组件。Element - The world's most popular Vue UI framework

<el-input v-model="movie.picture" v-if="false"></el-input>
<el-upload class="upload-demo" ref="upload" drag action="http://localhost:9090/file/upload"
  :on-change="changeFile1" :multiple="false" :show-file-list="false" :on-success="handleAvatarSuccess">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
    将文件拖到此处，或<em>点击上传</em>
  </div>
</el-upload>

后端接口：

@CrossOrigin
@Controller
@ResponseBody
@RequestMapping("/file")
public class FileController {
    @Value("${files.upload.path}")
    private String fileUploadPath;

    @Resource
    private FileMapper fileMapper;

    /**
     * 文件上传接口
     * @param file 前端传递过来的文件
     * @return 返回文件url
     * @throws IOException 异常处理
     */
    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        String type = FileUtil.extName(originalFilename);
        long size = file.getSize();
        // 定义一个文件唯一的标识码
        String uuid = IdUtil.fastSimpleUUID();
        String fileUUID = uuid + StrUtil.DOT + type;
        File uploadFile = new File(fileUploadPath + fileUUID);
        // 判断配置的文件目录是否存在，若不存在则创建一个新的文件目录
        File parentFile = uploadFile.getParentFile();
        if (!parentFile.exists()) {
            parentFile.mkdirs();
        }
        String url;
        // 获取文件的md5，通过对比md5避免重复上传相同内容的文件
        String md5 = SecureUtil.md5(file.getInputStream());
        // 从数据库查询是否存在相同的记录
        Files dbFiles = getFileByMd5(md5);
        if (dbFiles != null) { // 文件已存在
            url = dbFiles.getUrl();
        } else {
            // 上传文件到磁盘
            file.transferTo(uploadFile);
            // 数据库若不存在重复文件，则不删除刚才上传的文件
            url = "http://localhost:9090/file/" + fileUUID;
        }
        // 存储数据库
        Files saveFile = new Files();
        saveFile.setName(originalFilename);
        saveFile.setType(type);
        saveFile.setSize(size / 1024);
        saveFile.setUrl(url);
        saveFile.setMd5(md5);
        fileMapper.insert(saveFile);
        return url;
    }

    /**
     * 通过文件的md5查询文件
     * @param md5
     * @return 返回文件的md5
     */
    private Files getFileByMd5(String md5) {
        // 查询文件的md5是否存在
        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("md5", md5);
        List<Files> filesList = fileMapper.selectList(queryWrapper);
        return filesList.size() == 0 ? null : filesList.get(0);
    }
}

  FileController中的fileUploadPath属性说明：

@Value("${files.upload.path}")
private String fileUploadPath;

 这个路径写在这儿了：

注：图片保存路径

2.前端在回传图片方法中接收传回来的url，并将其中的图片名称赋值给实体类的图片属性。

handleAvatarSuccess(res) {
    this.$message({
      message: '图片上传成功',
      type: 'success'
    });
    this.src = res
    this.movie.picture = res
  },

3. 在上传图片的那一刻前端实体类的图片属性已经有后端传过来的值了，所以此时提交表单信息，后端接收请求把信息保存到数据库就可以了。