vue实现form表单提交文件上传

<el-form ref="organizationData" :rules="rules" :model="organizationData">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="选择文件" :label-width="formLabelWidth">
              <el-upload
                action=""
                class="upload-demo"
                :multiple="false"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="handleChangeLi"
                :auto-upload="false"
                :file-list="fileListAdd"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
   </el-form>

export default {
  name: \'WarehouseInformation\',
  components: { Pagination },
  data() {
    return {
      organizationData: {
        spaceType: \'1\', // 存放空间
        fileSpaceId: \'\', // 存放路径
        // processNo: \'\', // 所属工序
        // bin: \'\', // 所属bin
        customerNo: \'\', // 客户来源
        fileUnzipPath: \'\' // 解压路径
      },
      rules: {
        spaceType: [{ required: true, message: \'存放空间不能为空!\', trigger: \'change\' }],
        fileSpaceId: [{ required: true, message: \'存储路径不能为空!\', trigger: \'change\' }],
        // processNo: [{ required: true, message: \'所属工序不能为空!\', trigger: \'change\' }],
        // bin: [{ required: true, message: \'所属BIN级不能为空!\', trigger: \'blur\' }],
        customerNo: [{ required: true, message: \'来源客户不能为空!\', trigger: \'change\' }],
        fileUnzipPath: [{ required: true, message: \'解压路径不能为空!\', trigger: \'blur\' }]
      },
      formLabelWidth: \'120px\', // 弹出框form表单宽度展示
      readonly: false,
      fileOptions: [],
      fileListAdd: [], // 上传文件列表
      isDisable: false // 第三方变量进行防重
    }
  },
  methods: {
    /**
     * 创建接口
     */
    createData() {
      const _this = this
      this.$refs[\'organizationData\'].validate((valid) => {
        if (valid) {
          if (this.fileListAdd.length <= 0) {
            this.$message({
              type: \'info\',
              message: \'文件必须上传\'
            })
            return false
          }
          if (this.isDisable) {
            this.$message({
              type: \'warning\',
              message: \'接口在请求中，请勿重复点击!\'
            })
            return false
          }
          this.isDisable = true
          const formData = new FormData()
          for (const key in this.organizationData) {
            formData.append(key, this.organizationData[key])
          }
          this.fileListAdd.map(item => {
            formData.append(\'file\', item.raw)
          })
          fileInfoAdd(formData).then((res) => {
            if (res.code === \'0\') {
              this.isDisable = false
              if (res.data.code === \'3001\') {
                _this.$confirm(\'此文件名重复,若点击【确定】则新版本会覆盖并删除原版本，点击取消则关闭退出\', \'提示\', {
                  confirmButtonText: \'确定\',
                  cancelButtonText: \'取消\',
                  type: \'warning\'
                }).then(() => {
                  const formDataNew = new FormData()
                  for (const key in _this.organizationData) {
                    formDataNew.append(key, _this.organizationData[key])
                  }
                  _this.fileListAdd.map(item => {
                    formDataNew.append(\'file\', item.raw)
                  })
                  formDataNew.append(\'override\', true)
                  fileInfoAdd(formDataNew).then((res) => {
                    if (res.code === \'0\') {
                      _this.dialogFormVisible = false
                      _this.$message({
                        type: \'success\',
                        message: \'创建成功\'
                      })
                      _this.pageNum = 1
                      _this.pageSize = 10
                      _this.getList()
                    } else {
                      _this.$message({
                        type: \'error\',
                        message: res.message
                      })
                    }
                  })
                  // 删除到回收站的接口
                  fileInfoMvToRecycler({ id: res.data.id }).then((res) => {
                    if (res.code === \'0\') {
                      console.log((res))
                    } else {
                      this.$message({
                        type: \'error\',
                        message: res.message
                      })
                    }
                  })
                }).catch(() => { // 取消
                  this.$message({
                    type: \'info\',
                    message: \'已取消删除\'
                  })
                })
              } else {
                this.dialogFormVisible = false
                this.$message({
                  type: \'success\',
                  message: \'创建成功\'
                })
                this.pageNum = 1
                this.pageSize = 10
                this.getList()
              }
            } else {
              this.isDisable = false
              this.$message({
                type: \'error\',
                message: res.message
              })
            }
          })
        }
      })
    },
  
    /**
     * 文件上传删除
     */
    handleRemove(file, fileList) { // 上传附件大小
      console.log(file)
      console.log(fileList)
    },
    /**
     * 文件发生改变时
     */
    handleChangeLi(file, fileList) {
      console.log(file)
      console.log(fileList)
      this.fileListAdd = fileList
    },
    handlePictureCardPreview(file) {
      console.log(file)
    }
  }
}