ElementUI利用Form表单同时提交图片和视频

需求实现后的前端效果图：

效果图

<Icon type="md-refresh"></Icon>
               <el-form ref="form" :model="form" label-width="80px">
                <el-form-item size="small" label="视频名称">
                <el-input v-model="form.videoName" style="width: 200px"></el-input>
                   </el-form-item>
               <el-form-item size="small" style="width: 90px!important;" label="上传工号">
                 <el-input v-model="form.uploadId" style="width: 200px"></el-input>
                   </el-form-item>
                 <el-form-item size="small" style="width: 90px" label="上传姓名">
                  <el-input v-model="form.uploadName" style="width: 200px"></el-input>
                   </el-form-item>
                   <el-form-item size="small" label="公司ID">
                     <el-input v-model="form.companyId" style="width: 200px"></el-input>
                   </el-form-item>
                   <el-form-item label="视频上传">
                       <el-upload
                               name="video"
                               ref="uploadVideo"
                               :action=""
                               :multiple="false"
                               drag
                               :before-upload="beforeUploadVideo"
                               :file-list="fileList"
                               :auto-upload="false">
                           <i class="el-icon-upload"></i>
                   <div class="el-upload__text">将视频文件拖到此处,或<em>点击上传</em></div>
       <div class="el-upload__tip" slot="tip">只能上传mp4/flv/rmvb/avi 格式的视频文件</div>
                       </el-upload>
                    <P class="text">请保证视频格式正确，且不超过500M</P>
                   </el-form-item>
                   <el-form-item label="上传图片">
                       <el-upload :action=""
                                  ref="uploadImg"
                                  list-type="picture-card"
                                  :multiple="false"
                                  :on-preview="handlePictureCardPreview"
                                  :before-upload="beforeUploadImg"
                                  :file-list="fileList1"
                                  :auto-upload="false" name="image">
                           <i class="el-icon-upload"></i>
       <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件,并且只能上传一张图片</div>
                       </el-upload>
                       <el-dialog :visible.sync="dialogImageUrl">
                       <img width="100%" :src="imageUrl" alt="">
                       </el-dialog>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="onSubmit">立即保存</el-button>
                   </el-form-item>
               </el-form>

ref="form" 给form表单注册引用信息 ：model="form" 用于校验表单信息与数据绑定无关。

<el-upload></el-upload>标签对中 :action=""文件上传地址 multiple="false" 是否支持多文件上传

drag表示可以拖拽上传 before-upload="beforeupload1" 上传文件之前的钩子，该方法返回值为boolean

类型 :file-list="fileList" 上传文件的列表 auto-upload=”false“ 是否立即上传。注意:要想利用表单同时提交，绝对不能将auto-upload设置为true

上传图片部分 :on-preview 点击文件列表已上传的文件时的钩子 list-type文件列表的类型可选 text/picture/picture-card

dialogImageUrl: false,
imageUrl: '',
fileList: [],
fileList1: [],
form: {
    videoName: '',
    uploadId: '',
    uploadName: '',
    companyId: '',
},
param1: new FormData(),

data()中 return 的变量以及对象。

beforeUploadImg(file) {
              const isJPG = file.type == 'image/jpeg' || file.type == 'image/png' ||                   file.type == 'image/gif'
              const isLt20M = file.size / 1024 / 1024 < 20
                if (!isJPG) {
                    this.$message.warning('上传头像图片只能是 jpg/png/gif 格式!')
                    return isJPG
                }
                if (!isLt20M) {
                    this.$message.warning('上传头像图片大小不能超过 20MB!')
                    return isLt20M
                }
              this.param1.append('image', file)
              return false

          },
          beforeUploadVideo(file) {
              const isVideo = file.type == 'video/mp4' || file.type == 'video/flv' ||                   file.type == 'video/rmvb' || file.type == 'video/avi'
              const isLt500M = file.size / 1024 / 1024 < 500
                if (!isVideo) {
                    this.$message.warning('上传视频只能是 mp4/flv/rmvb/avi 格式!')
                    return isVideo
                }
                if (!isLt500M) {
                    this.$message.warning('上传视频大小不能超过 500MB!')
                    return isLt500M
                }
              this.param1.append('video', file)
              return false
          },
          onSubmit(options) {
              console.log(options)
              this.param1.append('videoTitle', this.form.videoName)
              this.param1.append('uploaderId', this.form.uploadId)
              this.param1.append('companyId', this.form.companyId)
              this.param1.append('uploaderName', this.form.uploadName)
              this.$refs.uploadImg.submit()
              this.$refs.uploadVideo.submit()
              let config = {
                  headers: {
                      'Content-Type': 'multipart/form-data'

                  },
                  withCredentials: true
              }
              this.$fly.post("/outer/uploadVideo", this.param1, config).then(res => {
                  if (res.succ) {
                      this.form = {};
                      this.fileList = [];
                      console.log(res);
                  }


              })
          },
          handlePictureCardPreview(file) {
              this.imageUrl = file.url;
              this.dialogImageUrl = true;
          }