elementUI上傳多張圖片回顯在編輯---更新

總有一天你會明白，委屈要自己消化，故事不用逢人就講。

結構

<el-form-item label="研究院海報：">
            <el-upload
              :action="actionPath"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :data="postData"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-progress="handleprogress"
              :file-list="photoList"
              :class="{ hide: hideUpload }"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="formCustom.dialogVisible">
              <img :src="formCustom.headPortrait" alt="" />
            </el-dialog>
</el-form-item>

data中

actionPath: "https://upload.qiniup.com", //上傳到服務器的路徑
postData: {
        token:"生成的token",
        key: ""
},
photoList: [],//用戶回顯
photoList: []//控制上傳按鈕顯示隱藏
formCustom:{
         headPortrait:[]//傳給后端  
}

引入控制按鈕顯示隱藏的css

import "../../style/uoLoad.css"

main.js中定義全局的外鏈地址用於顯示圖片

Vue.prototype.$httpqiniu = "七牛服務器外鏈域名"
使用時this.$httpqiniu

圖片回顯( 查詢接口 )

lookList() {
      const req = {傳遞的對應參數};
      gymnasiumLookVue(req).then(res => {
        if (res.data.code == "200") {
          this.introductionListLook = res.data.data.rows;
          this.introductionListLook.map(item => {
            const _this = this.formCustom;
            // 圖片回顯 如果有圖片puhs到this.formCustom.headPortrait
            item.poster.filter(item_img => {//后端返回地址路徑
              let Img = this.$httpqiniu + item_img;//拼接外鏈地址顯示出圖片放到photoList中
              this.photoList.push({ url: Img });
              this.formCustom.headPortrait.push(item_img);
            });
            // 回顯時如果圖片 >=8張隱藏上傳按鈕
            if (this.photoList.length >= 8) {
              this.hideUpload = true;
            } else {
              this.hideUpload = false;
            }
           
          });
        } else {
          return false;
        }
      });
    },

圖片提交( 編輯接口 )

poster: this.formCustom.headPortrait, //傳遞圖片( 正常傳參就可以底下會有操作 )  

按鈕觸發事件

handleChange() {
      // 當圖片大於8張 隱藏上傳按鈕
      if (this.formCustom.headPortrait.length >= 8) {
        this.hideUpload = true;
      }
}

上傳圖片成功的回調

handleAvatarSuccess(response) {
      //文件上傳成功時把返回值push到傳遞給后端的數組中
      this.formCustom.headPortrait.push("/" + response.key);
}

文件上傳時

handleprogress() {
      //文件上傳時，圖片大於8張，隱藏上傳按鈕
      if (this.formCustom.headPortrait.length >= 8) {
        this.hideUpload = true;
      }
}

刪除成功的回調

//字符串方法
substr()從起始索引號提取字符串中指定數目的字符。
第一個參數：要抽取的子串的起始下標。必須是數值。如果是負數，那么該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。

lastIndexOf()從后向前搜索字符串
第一參數：規定需檢索的字符串值
handleRemove(file) {
      //定義一個函數為刪除數組中指定元素( 根據值刪除不是位置 ) .remove("指定元素")使用
      Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      //判斷如果參數返回攜帶域名的url,開始截取只保留圖片名
      if (file.url) {
        let removePicture = file.url.substr(file.url.lastIndexOf("/"));
        this.formCustom.headPortrait.remove(removePicture);
        //觸發校驗
        if (!this.formCustom.headPortrait.length) {
          this.hasFmt = false;
          this.$refs.image.validate();
        }
      }
      //如果返回的就是圖片名，直接刪除
      if (file.response.key) {
        this.formCustom.headPortrait.remove("/" + file.response.key);
      }
      // 顯示按鈕
      if (this.formCustom.headPortrait.length <= 8) {
        this.hideUpload = false;
      }
}

文件上傳之前

beforeAvatarUpload(file) {
      // 文件上傳之前 自由key key為文件名，上傳到七牛中會顯示對應的圖片名
      this.postData.key = file.name;
}