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