ElementUI上传和表单提交

图片上传和表单提交

那么你就要明白图片上传和表单提交是两个功能，其对应不同的接口，表单中并不是保存了这个图片，而仅仅是保存了储存图片的路径地址。我们需要分析以下几点：

1、图片如何上传，什么时候上传？（ElementUI--upload上传组件的自动上传）

图片应该在点击upload上传组件的时候就触发了对应的事件，当选择了要上传的图片，点击确定的时候就请求了后端的接口保存了图片。也就是说你在浏览器中弹出的选择框中选择了要上传的图片，当你点击确定的一瞬间就已将图片保存到了服务器上；而再点击提交表单的时候，储存在表单中的图片数据仅仅是刚才上传的图片存储地址。

2、如何获取到已经上传的图片的储存地址？

因为在浏览器上传选择框被确定选择的瞬间已经请求了后端接口保存了图片，我们该怎么知道图片在哪里储存呢？

• 前端： 比如我们使用了ElementUI提供的上传组件，其就存在一个上传成功的回调函数：on-success，这个回调函数被触发的时间点就是图片成功上传后的瞬间，我们就是要在这个回调函数触发的时候获取到图片储存的地址。
• 后端： 上面讲了获取地址，这个地址就是后端返回给前端的数据（JSON格式）。因为后端图片上传接口配置图片储存的地址，如果图片上传成功，就将图片储存的地址以JSON格式返回给前端。

3、如何提交表单

说如何提交表单，这就显得很简单了，因为上面我们已经完成了：1、图片成功上传；2、获取到了图片在服务器上的储存地址。利用Vue的双向绑定思想，在图片成功上传的回调函数on-success中获取到后端返回的图片储存地址，将这个地址赋值给Vue实例data(){}中定义的表单对象。这样在提交表单的时候仅需要将这个表单对象发送给后端，保存到数据库就行了。

后端接口

1、上传接口
@Value("${dongcheng.uploadPath}")
private String UPLOAD_DIRECTORY;

@PostMapping("/loadUploadPath")
public R loadUploadPath(@RequestParam("file") MultipartFile file) throws IOException {
    String filename = file.getOriginalFilename();
    // 文件后缀
    String suffix = filename.substring(filename.lastIndexOf("."));

    Double size = ((Long) file.getSize()).doubleValue()/1024/1024;
    //生成uuid
    String uuid = UUID.randomUUID().toString().replaceAll("-", "");

    String code = uuid + suffix;

    //目录
    String pathFile = UPLOAD_DIRECTORY + "/" + DateUtils.format(new Date(), "yyyyMMdd");
    logger.debug(pathFile);

    //文件路径
    String path = pathFile + "/" + code;
    logger.debug(path);

   File directory = new File(pathFile);
    if (!directory.exists()){
        directory.mkdirs();
    }
    file.transferTo(new File(pathFile + "/" + code));

    return R.ok().put("path", path);
}

前端处理

handleOnSuccess (response, file, fileList) {
  if (response.code !== 0) {
    return this.$message.error(response.msg)
  }
  this.fileList = fileList
  this.path = response.path
  this.$message({
    message: '导入成功',
    type: 'success',
    duration: 1000,
    onClose: () => {
      this.$refs.upload.clearFiles()
      this.getDataList()
    }
  })
  // this.$refs.upload.clearFiles()
  console.log('response')
  console.log(response)
  console.log(file)
  console.log(fileList)
},

最后

表单提交

请求表单接口，保存到数据库

submitUpload() {
  // this.$refs.upload.submit()
},