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)
    }
  }
}