element-ui上传组件,通过自定义请求上传文件

记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方。

<el-upload
           ref="uploadMutiple"
           :auto-upload="false"
           action="Fake Action"
           :on-success="allHandleSuccess"
           :on-change="handleChange"
           :file-list="fileList"
           :http-request="allUpload"
           :before-upload="before_upload"
           multiple
>选取文件</el-upload>

<el-button type="primary" size="small" @click="submitUpload">上传</el-button>

首先关闭自动上传,并给随便给action赋值一个字符串。(action是必填属性)

       :auto-upload="false"
       action="Fake Action"

通过:on-change钩子函数,拿到文件列表:

    handleChange(file, fileList) {
      this.fileList = fileList;
    },

一般情况下,我们在submitUpload()的点击事件中去触发上传:

submitUpload() {
    this.$refs.uploadMutiple.submit();
}

之后组件会触发:http-request钩子行数。需要注意的是,这里你的fileList中有几个文件,就会执行几次:http-request钩子函数。这意味着,如果你把上传请求写在:http-request钩子函数中,就会造成重复不必要的请求。直接在submitUpload()中写post请求即可。只需要把文件封装为formData对象,作为参数传给后台即可。

      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });

      this.axios.post(api, formData);

下面是后台接口的写法:

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}
上一篇:Spring核心接口Ordered的实现及应用 (动态切换数据源时候用到)


下一篇:【shell】循环将字符串写入数组中?