el-upload 表单数据和文件同时上传。

有个项目需要表单数据和文件同时上传。

这里我们需要把自动element 的自动上传关闭 :auto-upload=“false” 然后覆盖默认的上传行为自定义为自己的手动上传 :http-request=“uploadFile”

          <el-upload class="upload-demo" action="#" :limit="1" :on-exceed="handleExceed" :auto-upload="false"
            :multiple="false" ref="uploadExcel" :http-request="uploadFile">
            <el-button type="primary">导入文档</el-button>
            <div slot="tip" class="el-upload__tip">大小不超过10mb</div>
          </el-upload>

  //自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体
    uploadFile(param) {
      this.file = param.file;
    },

然后点击提交按钮后提交表单， 但这里的表单数据和文件需要使用FormData转换后提交

  submitEditForm() {

      this.$refs.uploadExcel.submit();  
      //携带文件必须使用此对象
      const formDatas = new FormData();
      if (this.file) {
        //append方法逐个添加键值对
        formDatas.append("doc", this.file); //把文件实体添加到表单对象
      }
      //添加收集的表单数据

      formDatas.append("prdoDotyId", this.form.prdoDotyId)
      formDatas.append("prdoProjId", this.form.prdoProjId)
      formDatas.append("prdoName", this.form.prdoName)
      formDatas.append("prdoShortName", this.form.prdoShortName)
      formDatas.append("prdoNumber", this.form.prdoNumber)
      formDatas.append("prdoVersion", this.form.prdoVersion)
      formDatas.append("prdoDesc", this.form.prdoDesc)
      formDatas.append("prdoRemark", this.form.prdoRemark)
      formDatas.append("loginUserId", this.userInfo.userId)
      formDatas.append("loginUserName", this.userInfo.userName)
      let config = {
        header: {
          "Access-Control-Allow-Origin": "*"
        }
      }
      if (this.form.prdoId == '') {
        axios.post(process.env.VUE_APP_BASE_API + "/admin/projectDoc/add", formDatas, config).then((result) => {
          if (result.data.success) {
            this.$refs['form'].resetFields()
            this.$emit('change')
            this.isVisible = false
            this.$message.success("添加成功")
           this.$refs.uploadExcel.clearFiles()
          } else {
            this.$message.error(result.data.failReason || (this.isEdit ? '修改信息失败' : '新增信息失败'))
            this.$refs.uploadExcel.clearFiles()
          }
        })
      } else {
        formDatas.append("prdoId", this.form.prdoId)
        axios.post(process.env.VUE_APP_BASE_API + "/admin/projectDoc/update", formDatas, config).then((result) => {
          if (result.data.success) {
            this.$refs['form'].resetFields()
            this.$emit('change')
            this.isVisible = false
            this.$message.success("修改成功")
            this.$refs.uploadExcel.clearFiles()
          } else {
            this.$message.error(result.data.failReason || (this.isEdit ? '修改信息失败' : '新增信息失败'))
            this.$refs.uploadExcel.clearFiles()
          }
        })
      }
      // console.log(formDatas);

      //将数据随请求发过去
      // addProjectDoc({ formDatas });
    },