elmentUI+vue（FormData） 同一个接口提交表单数据和图片

1.不使用FormData提交。

2.思路

有两个接口，一个是图片接口，一个是表单数据接口，选择图片的时候让图片自动上传（auto-upload=‘真’），在后台使用formidable接收，解析图片名称将其返回（记得引入formidable），前端在on-success绑定的函数下接收返回数据。

// 商品图片
   uploadImg(req, res) {
		let form = new formidable.IncomingForm();
		// 保留文件后缀名
		form.keepExtensions = true
		// 存储位置
		form.uploadDir = './static/img'
		form.parse(req, function(err, fields, files) {
			let imgName = path.basename(files.file.path)
			if(imgName){
				res.json({
					status:200,
					name:imgName
				})
			}
		})
	}

接收来自后台数据，将其赋值给return{}中的一个自己定义的值。

3.点击提交表单的时候，获取表单参数（是一个对象），把返回的图片名字添加进去，最后将整个对象最为参数提交。

4.dialog.vue

<template>
  <el-dialog class="dialog-box" width="40%" :title="title" :visible.sync="dialogVisible" :modal-append-to-body='false'>
    <div style="margin: 20px;"></div>
    <el-form v-model="editFormVisible" :model="form" :rules="rules" :label-position="labelPosition" label-width="80px"
      ref="ruleForm">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="details">
        <el-input v-model="form.details"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="goods_type">
        <el-input v-model="form.goods_type"></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="stock">
        <el-input v-model="form.stock"></el-input>
      </el-form-item>
      <el-form-item label="商品销量" prop="sales">
        <el-input v-model="form.sales"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" ref="uploadElement" prop="imageUrl" class="upload-box">
        <el-input v-model="form.imageUrl" v-if="false"></el-input>
        <el-upload class="avatar-uploader" ref="upload" list-type="picture" action="/api/uploadImg" :before-upload="beforeUpload"
          name='file' :on-change="handleChange" :auto-upload="true" :on-success='success' :data="form">
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        imgName: '',
        files: '',
        api: '',
        title: '',
        labelPosition: 'right',
        editFormVisible: false,
        dialogVisible: false,
        form: {
          name: '',
          sales: '',
          stock: '',
          goods_type: '',
          price: '',
          details: '',
          imageUrl: ''
        },
        rules: {
          name: [{
            required: false,
            message: '请输入商品名称',
            trigger: 'blur'
          }, ],
          sales: [{
            required: false,
            message: '请选择活动区域',
            trigger: 'blur'
          }],
          stock: [{
            required: false,
            message: '请选择日期',
            trigger: 'blur'
          }],
          goods_type: [{
            required: false,
            message: '请选择时间',
            trigger: 'blur'
          }],
          price: [{
            required: false,
            message: '请输入价格',
            trigger: 'blur'
          }],
          details: [{
            required: false,
            message: '请选择活动资源',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      success: function(res) {
        if (res.status == 200) {
          this.imgName = res.name
        }
      },
      beforeUpload: function() {},
      handleChange: function(file) {
        this.files = file.raw
      },
      change: function(data) {
        this.api = data.api
        this.title = data.title
        this.editFormVisible = true;
        // 赋值给表单
        this.form = Object.assign({}, data.row);
        this.dialogVisible = true
      },
      submitForm(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var formData = this.form
            formData.imgName = this.imgName
            // _this.$refs.upload.submit()
            this.$post(this.api, formData).then(res => {
              if (res.status == 200) {
                this.dialogVisible = false
                this.$message({
                  message: res.message,
                  type: 'success',
                  center: true,
                  duration: 2000
                })
                this.$parent.getData()
              }
            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      resetDta() {
        let _this = this
        let close = document.querySelector('.el-dialog__close.el-icon.el-icon-close')
        close.onclick = function() {
          _this.resetForm('ruleForm')
        }
      }
    },
    mounted() {
      this.resetDta()
    }
  }
</script>

<style scoped="scoped" lang="less">
  .dialog-box /deep/ .el-input {
    width: 90%;
  }

  .dialog-box /deep/ .el-dialog__body {
    padding: 0 20px 10px 20px;
  }

  .dialog-box /deep/ .el-dialog__header {
    padding: 20px 20px 0;
  }

  .dialog-box /deep/ .el-form-item__error {
    left: 30px;
  }

  .dialog-box /deep/ .el-form-item:last-child>.el-form-item__content {
    float: right;
    margin-right: 4%;
  }

  .upload-box /deep/ .el-form-item__content {
    display: inline-block;
    /* margin-left: 80px; */
    width: 80%;
    margin-left: 0 !important;
    line-height: 0;
  }
</style>