UI組件--element-ui--Upload多組件自定義上傳

需求: 提交詳細信息的表單, 並上傳對應圖片(如下圖), 后台接口要求表單數據和圖片需要一次上傳完成..

分析: 實際上, 每個element-ui Upload組件都應發送一次請求, 很明顯不符合我們的要求, 於是,我們需要自定義上傳.

　　表單上傳首先考慮FormData對象, 那么就需要新建一個formData並在合適的時間將表單數據添加到formData中.

　　首先, 考慮將表單數據在提交的時候使用FormData.append()放到FormData對象中, 文件/圖片在change的時候放入到FormData對象中.

　　使用append方法會有個問題, 如果上傳不成功, 當你再次在當前頁面提交, 你會發現表單數據重新添加了一遍, 那是因為FormData中key相同並不會覆蓋掉 之前的.

　　所以這里考慮用FormData.set(), 如果FormData不存在這個key, 則新建一條新數據, 如果存在, 則修改此條數據.

　　定義表單數據:

    data() {
      return {
        checkForm: {
          customerName: '',
          phone: '',
          socialSecurityNO: ''
        },
        formData: new FormData(), // 用來上傳的表單

        // 用來顯示的圖片
        cardFrontImageUrl: '',
        cardBackImageUrl: ''

        // 用來回傳的圖片
        cardFrontUrl: '',
        cardBackUrl: ''
      }
    },

 

上傳

    methods: {
     // 選擇圖片上傳, 添加到formData中
      cardFrontOnChange (file, fileList) {
        if (fileList.length > 0) {
          this.formData.set('cardFront', file.raw);
        }
        this.cardFrontImageUrl = URL.createObjectURL(file.raw);
      },
       
      cardBackOnChange (file, fileList) {
        if (fileList.length > 0) {
          this.formData.set('cardBack', file.raw);
        }
        this.cardBackImageUrl = URL.createObjectURL(file.raw);
      },

     //   提交所有信息時, 將數據添加到formData中
    submit () {
        for (let key in this.checkForm) {
          if (this.checkForm[key]!=='') {
            this.formData.set(key, this.checkForm[key]);
          }
        }
        // api.submitInfo()是封裝好的上傳方法
        api.submitInfo(this.formData).then(res=> {
          if (res.code === 0) {
            // 成功后處理
          } else {
            // 失敗后處理
          }
        })
      }
    }    

如果后台接口設計的是上傳的圖片不用區分key, 那么選擇圖片添加到FormData中時,  只能用append方法, set將會覆蓋前面的, 根據實際需求選擇合適的方法就可以了.