vue ,使用antdesign中上傳圖片upload ,狀態一直爲uploading,踩坑

需求:
多文件上傳 ,上傳的時候綁定fileList回顯git

問題:
上傳成功了,也拿到了後臺返回的數據,可是onchang監聽的時候,file的狀態一直是uploadinggithub

緣由:onchange 只觸發了一次ide

解決:
使用單文件上傳時@change事件會至少觸發兩次,一次file.status=uploading,最後一次要麼是done或者error,ui

handleUpload1(info) {
      if (info.file.status === 'uploading') {
        this.loading = this.isUpload1 = true
        return
      }
      if (info.file.status === 'done') {
        this.loading = this.isUpload1 = false
        this.params.imgUrl1 = info.file.response.data.url
      }
    },

可是若是是須要上傳顯示一組文件,則須要保存文件的狀態會給一個屬性 :file-list="fileList"
這時候change事件只會觸發一次(uploading),後來在github上看到解決方法
對於受控模式,你應該在 onChange 中始終隨時跟蹤 fileList 的狀態,保證全部狀態同步到 Upload 內this

andleChangeFile (info, code) { //上傳文件
      console.log('info===>', info, code, info.fileList);
      let { fileList } = info
      const status = info.file.status
      if (status !== 'uploading') {
      }
      if (status === 'done') {
        this.videoUrlList.push({ uid: fileList[fileList.length - 1].uid, url: info.file.response.data.url })
      }
      this.fileList = [...fileList] //重點
    },

最後一行是關鍵,不管file上傳狀態如何,filelist必定要同步,還有不能用return,要否則就沒有回調了url

感謝:
https://blog.csdn.net/zhhao1/article/details/107106890.net

相關文章
相關標籤/搜索