elementUI 上传文件

1.vue界面代码

<template>
  <section>
        <el-upload
            class="upload-demo"
            ref="insertUpload"
            :show-file-list="true"
            :auto-upload="false"
            :name="upload.insertUpload.name"
            :action="upload.insertUpload.action"
            :limit="upload.insertUpload.limit"
            :file-list="upload.insertUpload.fileList"
            :multiple="true"
            :data="formData"
            :on-preview="insertUploadOnPreview"
            :on-remove="insertUploadOnRemove"
            :on-success="insertUploadOnSuccess"
            :on-error="insertUploadOnError"
            :on-progress="insertUploadOnProgress"
            :on-change="insertUploadOnChange"
            :before-upload="insertUploadBeforeUpload"
            :before-remove="insertUploadBeforeRemove"
            :http-request="insertUploadHttpRequest">
            <!-- <i class="el-icon-upload"></i> -->
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div class="el-upload__tip" slot="tip">只能上传图片或pdf文件,文件大小小于20MB</div>
          </el-upload>
  </section>
</template>

<script>

export default {
  name: "MaterialEnclosure",
  methods: {
   insertUploadHttpRequest(param) {
      console.log("params", param);
      const form = new FormData();
      const newFormData = JSON.parse(JSON.stringify(this.formData || {}));
      // ParamsSelect.getAddSelectParams(newFormData, this.planTaskList, {
      //   planTaskBillCode: "billCode",
      //   materialId: "productId",
      // }, {planTaskId: "id"});
      form.append("data", JSON.stringify(newFormData));
      form.append("oauth", this.oauth);
      if (this.formData.id === 0) {
        console.log("fileList", this.upload.insertUpload.fileList);
        if (this.upload.insertUpload.fileList && this.upload.insertUpload.fileList.length>0) {
          this.upload.insertUpload.fileList.map((fileItem) => {
            form.append(this.upload.insertUpload.name, fileItem.raw);
          });
        }
        console.log("form", form);
        // return true;
        // form.append(this.upload.insertUpload.name, param.file);
        // 新增
        this.loading.addLoading = true;
        MaterialEnclosureAPI.insertMaterialEnclosureWithList(form).then(({res, data}) => {
          this.loading.addLoading = false;
          if (res.data.code === 1) {
            this.getMainList();
            this.dialog.formDataVisible = false;
            this.upload.insertUpload = {
              action: iproduceUrl + "materialEnclosure/insertMaterialEnclosureWithList",
              name: "fileList",
              limit: 2,
              headers: {'Access-Control-Allow-Methods': 'POST'},
              fileList: [],
              data: {},
              file: {},
              reUpload: false,
              reviseFlag: false
            };
          } else {
            this.$message({
              message: data.msg || "提交失败！",
              type: 'error'
            });
          }
        });
      } else {
        console.log("fileList", this.upload.insertUpload.fileList);
        if (this.upload.insertUpload.fileList && this.upload.insertUpload.fileList.length>0) {
          this.upload.insertUpload.fileList.map((fileItem) => {
            form.append(this.upload.insertUpload.name, param.file);
          });
        }

        // if (param.file) {
        //   form.append(this.upload.insertUpload.name, param.file);
        // }
        //  上传到接口
      }
    },
    insertUploadOnPreview(file) {
      console.log("insertUploadOnPreview", file);
    },
    insertUploadOnRemove(file, fileList) {
      console.log("insertUploadOnRemove", file, fileList);
      this.upload.insertUpload = {
        action: iproduceUrl + "materialEnclosure/insertMaterialEnclosureWithList",
        name: "fileList",
        limit: 2,
        headers: {'Access-Control-Allow-Methods': 'POST'},
        fileList: fileList,
        data: {},
        file: file,
        reUpload: false,
        reviseFlag: false
      };
    },
    insertUploadOnSuccess(response, file, fileList) {
      console.log("insertUploadOnSuccess", response, file, fileList);
    },
    insertUploadOnError(err, file, fileList) {
      console.log("insertUploadOnError", err, file, fileList);
    },
    insertUploadOnProgress(event, file, fileList) {
      console.log("insertUploadOnProgress", event, file, fileList);
    },
    insertUploadOnChange(file, fileList) {
      console.log("insertUploadOnChange", file, fileList);
      if (checkSuffix(file.name, "pdf,jpg,png,jpeg,tga,tif,svg,esp,exr")) {
        console.log("上传成功！");
        this.upload.insertUpload.file = file;
        // 多文件上传
        this.upload.insertUpload.fileList = fileList; //[file];
        return true;
      } else {
        this.upload.insertUpload.file = {};
        this.upload.insertUpload.fileList = [];
        console.log("请上传doc或者pdf文档")
        this.$message({
          message: "请上传doc或者pdf文档",
          type: "error"
        });
        return false;
      }
    },
    insertUploadBeforeUpload(file) {
      console.log("insertUploadBeforeUpload", file);
    },
    insertUploadBeforeRemove(file, fileList) {
      this.upload.insertUpload.file = file;
        // 多文件上传
      this.upload.insertUpload.fileList = fileList; //[file];
      console.log("insertUploadBeforeRemove", file, fileList);
    },
 },
data() {
    return {
       upload: {
        insertUpload: {
          action: iproduceUrl + "materialEnclosure/insertMaterialEnclosureWithList",
          name: "fileList",
          limit: 2,
          headers: {'Access-Control-Allow-Methods': 'POST'},
          fileList: [],
          data: {},
          file: {},
          reUpload: false,
          reviseFlag: false
        }
      },
    };
  }
};
</script>

2.接口代码

头文件设置，使用原生的axios，头文件：{headers: {"Content-Type": "multipart/form-data"}}

Object.assign(IPRODUCE.materialEnclosure, {
  insertMaterialEnclosureWithList: (params) => axios.post(iproduceUrl + "materialEnclosure/insertMaterialEnclosureWithList", params, {headers: {"Content-Type": "multipart/form-data"}})
});