elementUI表单携带多文件一次性上传

由于elementUI的图片上传控件默认是单图片上传的，如果你添加了多张图片它会分多次请求发送给服务器，项目中多数是需要一次性上传多个图片文件且携带表单内容，这里记录一下实现功能的过程

代码：

<el-form  :ref="form" :rules="rules" :model="form" label-width="110px" style="overflow: hidden;margin-left: 300px;margin-top: 30px">
      <el-col :span="12">
        <el-form-item label="印章类型：" prop="seal_type">
          <el-select v-model="form.seal_type" placeholder="请选择" @change="queryApprove">
            <el-option v-for="item in typeOptions" :key="item.Value" :label="item.Text" :value="item.Value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由：" prop="apply_reason">
          <el-input type="textarea" :rows="3" v-model.trim="form.apply_reason" placeholder="请输入申请理由"></el-input>
        </el-form-item>
        <el-form-item label="上传材料：" prop="files">
          <el-upload
            v-model="form.files"
            ref="upload"
            class="upload-poster"
            :limit='4'
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP"
            :action='uploadAction'
            list-type="picture-card"
            :show-file-list="true"
            :on-change="imgPreview"
            :http-request="uploadFile"
            :auto-upload="false">
            <i class="el-icon-plus"></i>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="picUrl" alt="">
            </el-dialog>
          </el-upload>
        </el-form-item>
        <el-form-item label="审批人：" prop="approve_person" >
          <el-select v-model="form.approve_person" placeholder="请选择" style="display: block">
            <el-option v-for="item in approveOptions" :key="item.PersonId" :label="item.Name" :value="item.PersonId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
        <el-button class="submit-button"  @click="submitUpload(form)">提交</el-button>
        </el-form-item>
      </el-col>
    </el-form>

data部分：

return {
        dialogVisible: false,
        picUrl:'',
        uploadForm: new FormData(),
        form: {
          files:'',
          seal_type:'',
          apply_reason:'',
          approve_person:'',
        },
      };

方法：

/*由于element多文件是分别上传，所以这里覆盖默认的上传行为，将文件添加到FormData中*/
      uploadFile(file) {
        this.uploadForm.append('files', file.file);
      },
      submitUpload(form) {
        if(this.form.files.length>0){
          this.$refs[form].validate((valid) => {
            if (valid) {
              this.$refs.upload.submit();
              this.uploadForm.append('seal_type', this.form.seal_type);
              this.uploadForm.append('apply_reason', this.form.apply_reason);
              this.uploadForm.append('approve_person', this.form.approve_person);
              axios.post(saveSealApplication(),this.uploadForm).then(res=>{
                if(res.data.Successful==true){
                  this.$message({type: 'success', message: '提交成功!'});
                  this.reload();
                }
              })
            }else {
              return false;
            }
          })
        }else{
          this.$message({type: 'error', message: '请上传申请材料!'});
        }
      },
      imgPreview (file, fileList) {
        let fileName = file.name;
        let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test(fileName.toLowerCase())) {
          this.picUrl = URL.createObjectURL(file.raw);
          this.form.files=fileList;
        } else {
          //移除最后一个元素
          fileList.pop();
          this.$message.error('请选择图片文件');
        }
      },

说明一下实现思路，首先，在el-upload中添加:on-change方法，此方法在每次添加图片时触发，获取本地上传图片的路径并渲染到src上以达到预览的目的，elementUI官方示例的文件预览是需要发送http请求的，用这种方式就可以完成本地预览。on-change方法会携带file, fileList两个参数，一个是当前文件另一个是文件数组，我这里进行判断如果文件不是指定格式就用.pop方法最后一项移除该文件，否则文件会保留在数组的末尾并形成空白显示。

其次，要实现文件批量上传，这里主要使用了FormData对象来发送表单。首先给el-upload关闭自动上传:auto-upload=“false”，并且添加ref=“upload”，同时添加:http-request=“uploadFile”，覆盖elementUI的上传行为，在用户点击提交时，每一个文件上传时都会触发uploadFile方法，该方法将文件添加到FormData对象中，同时可以手动添加表单携带的参数，这样就完成了多图片及表单的一次性上传。

总结一下文件上传流程：用户点击上传图片，触发imgPreview方法，实现文件预览，用户表单填写完毕，点击提交，触发submitUpload方法，使用this.$refs.upload.submit();手动触发图片上传，这里的upload与前面说的el-upload的ref必须相同。触发了图片上传后，elementUI仍然是一个个图片上传，但是我们这里使用uploadFile方法覆盖了它的上传行为，并且将文件添加到FormData对象中，然后继续在代码中手动添加你请求需要携带的属性即可。

这里还遗留了一些问题，就是文件的表单验证我尝试了很多方式没有完成，不是不触发验证就是触发了验证无法关闭，于是我这里将文件添加到数组中，在用户点击提交时判断数组长度并使用消息提示来手动验证。