快捷導(dǎo)航

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

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

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

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

情景介紹

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

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

功能圖片

嘗試的解決辦法

方法1

在el-upload上動(dòng)態(tài)綁定ref，這樣在每次上傳成功后我都通過獲取對應(yīng)的ref調(diào)用上傳組件的clearFiles()進(jìn)行文件清空操作，這樣方便二/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é)果：

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

方法2

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

<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é)果：完美解決多次上傳失效問題！