組件中多個el-upload存在導(dǎo)致上傳圖片失效問題怎么解決

本篇內(nèi)容介紹了“組件中多個el-upload存在導(dǎo)致上傳圖片失效問題怎么解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

組件中多個el-upload存在導(dǎo)致上傳圖片失效

情景介紹

公司中開發(fā)的后臺系統(tǒng)使用的是vue + Avue + elm組件，在打開新增的彈窗的后彈窗內(nèi)有一個點擊新增配置按鈕會自動生成一行表格的功能，在生成的表格中有一列是上傳圖片的功能，由于配置詳情這個字段下的表格是手動生成的，導(dǎo)致二次上傳表格內(nèi)的封面圖的時候會出現(xiàn)上傳沒任何反應(yīng)的情況

百度了很久也沒找到解決辦法，最后經(jīng)過一步一步的嘗試發(fā)現(xiàn)elm組件在頁面首次渲染只會初始化一次的情況。

功能圖片

嘗試的解決辦法 

方法1 

在el-upload上動態(tài)綁定ref，這樣在每次上傳成功后我都通過獲取對應(yīng)的ref調(diào)用上傳組件的clearFiles()進行文件清空操作，這樣方便二/N次上傳仍然是生效的；

<avue-crud :option="configOption" :data="formData.configDetails">
   <template slot="coverImg" slot-scope="scope">
      <el-upload
         class="avatar-uploader"
         accept="image/*"
         :http-request="(param) => uploadImage(param, scope.row)"
         action="～～"
         :limit="1"
         :ref="'coverPicUpload' + scope.row.$index"
         :show-file-list="false"
         :before-upload="beforeUpload"
       >
         <el-image
            
            fit="contain"
            v-if="scope.row.picUrl"
            :src="scope.row.picUrl"
         >
         </el-image>
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       <div >圖片格式: jpg/gif  圖片尺寸: 1920X1080</div>
   </template>
  </avue-crud>

    //上傳封面圖片
    uploadImage(param, row) {
      
      ....執(zhí)行上傳的方法，上傳成功后執(zhí)行下行代碼
      this.$refs['coverPicUpload'+row.$index].clearFiles()
    },

方法1的結(jié)果： 

并沒有解決我的問題，仍然只有彈窗首次打開初始化的那一行的上傳在多次點擊的時候能正常使用，手動添加的幾行只有第一次上傳能正常，二次點擊就沒有反應(yīng)；

方法2

在1的基礎(chǔ)上，同時對el-upload進行初始化，也就是在el-upload組件的任意上級元素上添加 v-if="updateInit"，在每次手動新增一行的時候會讓所有的el-upload進行初始化，這樣每一行都會有自己的上傳組件；

<el-form-item v-if="updateInit" label="配置詳情:" prop="configDetails">
  <avue-crud :option="configOption" :data="formData.configDetails">
   <template slot="coverImg" slot-scope="scope">
      <el-upload
         class="avatar-uploader"
         accept="image/*"
         :http-request="(param) => uploadImage(param, scope.row)"
         action="～～"
         :limit="1"
         :ref="'coverPicUpload' + scope.row.$index"
         :show-file-list="false"
         :before-upload="beforeUpload"
       >
         <el-image
            
            fit="contain"
            v-if="scope.row.picUrl"
            :src="scope.row.picUrl"
         >
         </el-image>
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       <div >圖片格式: jpg/gif  圖片尺寸: 1920X1080</div>
   </template>
  </avue-crud>
</el-form-item>

    // 新增配置
    addConfig() {
      this.updateInit = false
      
      this.formData.configDetails.push({
        title: "",
        picKey: "",
        picUrl: "",
      });
      this.$nextTick(() => {
        this.updateInit = true
      })
    },

方法2結(jié)果：完美解決多次上傳失效問題！ 

“組件中多個el-upload存在導(dǎo)致上傳圖片失效問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！