ele带表单上传

npm install qs

api文件中引入import qs from 'qs'

export function saveOrUpdate(data) {
    return request({
        url: 'url',
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify(data),
    })
}

使用**qs..stringify(data)**后，vue文件中不需要在进行FormData数据格式转换

ele上传组件代码

<el-upload
              ref="upload"
              class="upload-demo"
              :action="action"
              :headers="headers"
              accept="image/*"
              :file-list="fileList"
              list-type="picture"
              name="xmFile"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              :data="formData"
              :on-change="change"
              :on-success="success"
              :on-error="error"
              :on-remove="
                (file, fileList) => {
                  this.fileList = this.fileList.filter((item) => {
                    return item.url !== file.url;
                  });
                }
              "
            >
              <el-button size="small">点击上传</el-button>
            </el-upload>
            /
             <el-button type="primary" @click="submitForm">{{
              isAdd ? "新增" : "修改"
            }}</el-button>

   import { getToken } from "@/utils/auth";
   fileList: [],
      action: process.env.VUE_APP_BASE_API + "updateUrl",
      headers: {
        Authorization: "Bearer " + getToken(),
      },


//————————————————————————————————————


      submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        if (this.fileList.length) {
          this.$refs.upload.submit();
        } else {
          update(this.formData).then((res) => {
            this.$message({
              message: this.isAdd ? "添加成功" : "修改成功",
              type: "success",
            });
            this.addVisible = false;
            this.getList();
          });
        }
      });
    },
    change(file, fileList) {
      this.fileList = fileList;
    },
    success() {
      this.$message({
        message: this.isAdd ? "添加成功" : "修改成功",
        type: "success",
      });
      this.addVisible = false;
      this.getList();
    },
    error(e) {
      this.$message({
        message: e,
        type: "error",
      });
    },