在vue中用multipart/form-data方式上传文件并同表单同步提交数据

项目是基于若依开发

1、dialog页面内容

 <el-dialog :title="viewDataTitle" :visible.sync="viewDataOpen" width="600px" append-to-body>
      <el-form ref="viewDataForm" :model="viewDataForm" label-width="100px">
        <el-form-item label="视图选择" prop="type">
          <el-select v-model="viewDataForm.type" placeholder="请选择视图" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                       :value="item.value" @click.native="seletChange(item)" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视图名称" prop="viewName" v-if="isShowFir">
          <el-input v-model="viewDataForm.viewName" placeholder="请输入视图名称" />
        </el-form-item>
        <el-form-item label="导入文件" prop="uploadFile" v-show="isShowSec">
          <el-upload class="upload-demo" v-model="viewDataForm.uploadFile" ref="viewDataUpload" 
              :limit="1" action="uploadAction" :data="viewDataForm" :headers="viewDataUpload.headers"  
              :on-exceed="viewHandleExceed" 
              :auto-upload="false" 
              :on-error="viewUploadError" 
              :before-upload="viewHandleBeforeUpload"
              :on-change="changeFile" :on-remove="viewHandleRemove" :file-list="uploadFile">
              <el-button plain size="mini" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="数据" prop="viewVal" v-show="isShowThird">
          <el-input v-model="viewDataForm.viewVal" placeholder="请输入数据" />
        </el-form-item>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewDataSubmitForm">确 定</el-button>
        <el-button @click="viewDataCancel">取 消</el-button>
      </div>
    </el-dialog>

2、data部分

   //是否显示外省弹出层
   viewDataOpen: false,
   //外省弹出层标题
   viewDataTitle: "",
   //外省文件上传
   viewDataUpload: {
       headers: {
             "Content-Type": "multipart/form-data",
             Authorization: "Bearer " + getToken()
       },
   },
   uploadFile: [],
   //表单参数
   viewDataForm:{},

3、methods

 viewDataHandleUpload() {
            this.viewReset();
            this.viewDataOpen = true;
            this.viewDataTitle = "首页视图数据录入";
            -----省略-----
          },
          viewHandleExceed(files, fileList) {
            this.$message.error("只能长传一个文件!");
          },
          viewHandleRemove(file, fileList) {
            this.$message.error("删除成功!");
          },
          // 图片上传失败时
          viewUploadError() {
            this.$message.error("图片上传失败!");
          },
          //上传之前
          viewHandleBeforeUpload(file) {

          },
          changeFile(file, fileList) {
            this.viewDataForm.uploadFile = fileList[0].raw
          },
          // 表单重置
          viewReset() {
            this.viewDataForm = {
              type: null,
              viewName: null,
              viewVal: null,
              --------省略-------
            };
            this.uploadFile = [];
          },
          viewDataCancel() {
            this.viewDataOpen = false;
            this.viewReset();
          },
          seletChange(data) {
              --------省略----------
          },
          viewDataSubmitForm() {
            this.$refs["viewDataForm"].validate(valid => {
              if (valid) {
                let forms = new FormData();
                //该数据类型默认参数Content-Type:multipart/form-data
                forms.append("uploadFile",this.viewDataForm.uploadFile);
                forms.append("type", this.viewDataForm.type);
                forms.append("viewName", this.viewDataForm.viewName);
                forms.append("viewVal", this.viewDataForm.viewVal);
                saveViewData(forms).then(response => {
                    this.$modal.msgSuccess("录入成功");
                    this.viewDataOpen = false;
                  });
              }
            });
          },

4.后台接收

@PostMapping("/saveView")
public AjaxResult saveView(ViewDataVo viewData,@RequestParam(value = "uploadFile",required = false) MultipartFile uploadFile) {
    --------省略----------
}