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;
}