element upload上传文件-自定义上传方式

因未element文件上传获取上传返回值只能获取最后一个人文件的返回值，多文件上传会被覆盖，因此可以自定义上传方式

1. 页面对话框

<!-- 上传附件 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload"
                 :limit="5"
                 accept=".jpg, .png, .gif"
                 :auto-upload="false"
                 :headers="upload.headers"
                 :action="upload.url"
                 :data="upload.data"
                 multiple
                 drag
                 :file-list="upload.fileList"
                 :disabled="upload.isUploading"
                 :on-change="handleFileChange"
                 :http-request="httpRequest"
                 :on-progress="handleFileUploadProgress"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或 <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入 jpg、png、gif 格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

2.上传参数以及自定义上传函数

export default {
  data(){
    return{

      //上传附件参数
      upload: {
        open: false, // 是否显示弹出层
        title: "", // 弹出层标题
        isUploading: false, // 是否禁用上传
        headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
        data: {} ,// 上传的额外数据，用于文件名
        //上传文件
      },
      fileList: [],
    }


  },

  methods:{

    handleAdd() {
      this.upload.open = true;
      this.upload.title = "上传文件";
    },
    /** 处理上传的文件发生变化 */
    handleFileChange(file, fileList) {
      //选择文件后，给fileList对象赋值
      this.upload.fileList = fileList;
      if(file.status=='success'){
      }
    },
    /** 处理文件上传中 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true; // 禁止修改
    },
    /** 发起文件上传 */
    submitFileForm( file, fileList) {
      this.$refs.upload.submit();
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      // 清理
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
    },

    //  覆盖默认上传行为
    httpRequest(params) {
      let fd = new FormData();
      fd.append('file', params.file);
      // query是放在params中接收的参数，fd是放在了body中接收
      var  that=this;
      uploadFile1({ query: 'query' }, fd)
        .then((res) => {
          if (res.code === 0) {
            this.ids.push(res.data);
            this.queryParams.id=parseInt(res.data) ;
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            // 执行查询
            getFilePage(this.queryParams).then(response => {
              this.attachList.push(response.data.list[0]);
              this.total=this.ids.length;
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: '上传失败，请重新上传',
            type: 'error'
          });
        });
      // 清理
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
    }
  }
}
</script>

<style >
.el-dialog__title{
  font-weight: bold;
}
</style>