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

更新時間：2023年03月28日 09:58:51 作者：鬧鬧的鬧鐘

這篇文章主要介紹了組件中多個el-upload存在導(dǎo)致上傳圖片失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

組件中多個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
            style="width: 300px; height: 150px"
            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 style="color:red;">圖片格式: 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
            style="width: 300px; height: 150px"
            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 style="color:red;">圖片格式: 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é)果：完美解決多次上傳失效問題！