el-upload组件如何把上传图片跟form表单内容同时放进formData里面提交给后台

Question

需求：
el-form
里面有一个el-upload
还有很多form字段

要求把el-upload上传的图片文件 以及 form字段 使用formData方式传给后台

遇到问题

formData 一直是空

`

  <el-form :model="form" :rules="rules" ref="form" label-width="140px">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="选择设备：" prop="equipmentType">
          <el-select v-model="form.equipmentType" placeholder="请选择设备类型">
            <el-option
              v-for="item in equipmentTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="设备图片:" class="hotel-logo">
          <el-upload
            action="#"
            accept=".jpg, .jpeg, .png, .gif"
            :before-upload="uploadform"
            :on-change="imageChange"
            :auto-upload="false"
            prop="file"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <span
              style="margin-left:20px;color:red;"
              slot="tip"
              class="el-upload__tip"
            >只能上传"gif", "jpg", "jpeg", "png"文件</span>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="资产编号：" prop="assetCode">
          <el-input v-model="form.assetCode" placeholder="请输入资产编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="型号/规格：" prop="model">
          <el-input v-model="form.model" placeholder="请输入型号/规格"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
   </el-from>

`

`
data() {

return {
  isVisible: false,
  id: "", //全局id
  state: [], //设备状态
  equipmentTypes: [], //设备类型
  form: {
    equipmentCode: "",
    expiryDate: ""
  },
  images: [],
  fileFormData: null,

`

`
imageChange(file, fileList, name) {

  //on-change触发
  this.images["file"] = fileList;
  console.log(121212121212, this.images);
},
upload() {
  const fd = new FormData();
  fd.append("dsc", this.form.equipmentType);
  console.log(12121212121212, fd);
  Object.entries(this.images).forEach(file => {
    file[1].forEach(item => {
      fd.append("files", item.raw);
      fd.append(item.name, file[0]);
    });
  });

  let config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  };
  console.log(this.fileFormData);
  this.$axios
    .post(`/a/biEquipment/saveData`, this.fileFormData, config)
    .then(res => {
      console.log(res);
    })
    .catch(() => {
      this.$message.error("保存失败，请稍后重试");
    });
},

`

打印的formData一直是一个空对象

Answer 1

根据你的代码没发现给this.fileFormData赋值的操作，只有给upload方法里局部变量fd赋值的操作。

我也遇到过类似的问题，我的解决办法是把file对象添加到form对象里，然后objectToFormData 工具直接把这个对象转换成FormData对象提交。

const formData = objectToFormData(this.addForm)
...
axios.post("/path", formData).then() ...