vue + 原生input 框上传多张图片

给的设计稿样式和element ui 很不一样 虽然一直坚信 没有覆盖不了的样式 但这次自己用原生的写了一次 爬坑之路继续中....

要求： 一次上传多张图片限制一次最多4张 对每一张图片可以单独修改 点击加号 产生一个可以上传多个图片的结构 最多限制五组

1 html 代码 

        <div class="wrapIntroduction">
              <div class="wrapTop">
                <span class="modelPhoto">
                  <i class="warnImg"></i> 简介:
                </span>
                <span class="tips">
                  <i class="tipImg"></i> 单条最多支持4张图片，格式为JPG/PNG 图片不大于1M，建议尺寸650*350像素.
                </span>
              </div>
              <div class="wrapContent" v-for="(item,i) in introducList" :key="i">
                <textarea v-model="item.describe" class="describe" maxlength="400"></textarea>
                <button class="addButton" @click="addDes(i,$event)">+</button>
                <button class="reduceButton" v-show="i > 0" @click="removeDes(i,$event)">-</button>
                <label class="updateImg">
                  上传图片
                  <input
                    @change="onModelImg(i,$event,-1)"
                    multiple="multiple"
                    accept="image/jpeg, image/jpg, image/png"
                    type="file"
                    ref="updateImg"
                  >
                </label>
                <ul class="modelDetail" v-if="item.isShow">
                  <div class="modelDiv" v-for="(ite,ind) in item.imgs" :key="ind">
                    <li class="everyModel" v-if="!ite.isDelete">
                      <div class="deleteDiv">
                        <img class="deleteImg" @click="deleteModel(i,ind)" :src="deleteImg" alt>
                      </div>
                      <label>
                        <div class="modifyImg">
                          <p>修 改</p>
                          <input type="file" @change="onModelImg(i,$event,ind)">
                        </div>
                        <img class="detailImg" :src="ite.base" alt>
                      </label>
                    </li>
                  </div>
                </ul>
              </div>
             </div>

2  js 代码  

 数据结构 ：

  确定imgs 数组里没有被删除的图片有几个 

forModelImg(arr) {
      arr = arr || [];
      var list = [];
      for (var i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (!item.isDelete) {
          list.push(item.url);
        }
      }
      return list;
},

 

    onModelImg(index, e, appendTo) {
      // 监听对应的input 框的改变事件 上传简介的图片  -1   index
      var obj = this.introducList[index]; // 获取数组里对应的对象
      obj.isShow = true;

      var input = e.target.cloneNode(true);
      e.target.value = ""; // 获取当前点击的
      var fileResault = input.files;

      if (appendTo < 0) {
        var maxLen = 4;
        var oldLen = this.forModelImg(this.introducList[index]["imgs"]).length;
        var missLen = maxLen - oldLen;
        // console.log(maxLen,oldLen,missLen,fileResault.length)
        // 循环取出 每一个文件  限制4 个
        if (fileResault && fileResault.length > missLen) {
          this.$message.warning("请每条描述至多添加" + maxLen + "张图片");
        }
        for (var i = 0; i < fileResault.length && i < missLen; i++) {
          if (typeof fileResault[i] == "object") {
            this.uploadModel(obj["imgs"], fileResault[i], appendTo);
          }
        }
      } else {
        this.uploadModel(obj["imgs"], fileResault[0], appendTo);
      }
    },
    uploadModel(imgs, fileResault, appendTo) {
      // 上传简介的图片
      var fileSize = fileResault.size;
      if (fileSize > 1024 * 1024) {
        // 图片大小不要大于1M
        this.$message({
          message: this.$infoMsg.UPLOAD_IMG_ERROR,
          type: "warning"
        });
        return;
      }
      var fileType = fileResault.type;
      if (
        fileType != "image/jpeg" &&
        fileType != "image/jpg" &&
        fileType != "image/png"
      ) {
        this.$message({
          message: "请选择正确类型的图片",
          type: "warning"
        });
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(fileResault);
      reader.onload = e => {
        var newObj = { base: "", url: "", isDelete: false }; 
         //{base:"",url:"",isDelete:false}
        newObj.base = e.target.result;
        // obj["imgs"].push(newObj);
        if (appendTo >= 0) {
          imgs.splice(appendTo, 1, newObj);
        } else {
          imgs.push(newObj);
          appendTo = imgs.length - 1;
        }
        //  把所有选中的图片放到上传处
        this.uploadModelImg(fileResault, imgs, appendTo)
          .then(function() {})
          .catch(() => {});
      };
    },
    async uploadModelImg(fileResault, imgs, appendTo) {
      let param = new FormData();
      param.append("Content", fileResault);
      param.append("SrvType", "mp");
      param.append("FileType", "uploademodelimg");
      this.$Api
        .uploadImg(param)
        .then(res => {
          var status = res.data.Code;
          if (status === 0) {
            // console.log(res.data.FilerPath);
            imgs[appendTo].url = res.data.FilerPath;
          }
        })
        .catch(err => {});
    },
    deleteModel(index, ind) {
      // 删除模型详情的对应的图片 应该把对应的上传的图片删除
      var obj = this.introducList[index];
      //   把对应的isDelete 调整为 true
      obj["imgs"][ind].isDelete = true;
      let count = 0;
      for (var i = 0; i < obj["imgs"].length; i++) {
        if (obj["imgs"][i].isDelete) {
          count++;
        }
      }
      if (count == obj["imgs"].length) {
        obj.isShow = false;
      }
    },
    addDes(index, e) {
      // 点击 增加模型描述和图片 增加对应数组里的元素
      this.onStopPropagation(e);
      if (this.introducList.length < 5) {
        let obj = { describe: "", imgs: [], isShow: false };
        this.introducList.splice(index + 1, 0, obj);
      } else {
        //  最多可添加5条描述
        this.$message({
          message: this.$infoMsg.UPLOAD_DESCRIPTION_ERROR,
          type: "warning"
        });
        return;
      }
    },
    removeDes(index, e) {
      // 点击删除 删除对应的 添加的描述
      this.onStopPropagation(e);
      this.introducList.splice(index, 1);
    },

 css 样式 

 .wrapContent {
          padding-left: 106px;
          position: relative;
          padding-bottom: 10px;
          .describe {
            text-indent: 20px;
            padding: 5px;
            width: 500px;
            height: 90px;
            line-height: 22px;
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 3px;
            font-size: 14px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
          .addButton {
            width: 30px;
            height: 30px;
            background: rgba(246, 246, 246, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 3px;
            position: absolute;
            left: 625px;
            top: 6px;
            color: #666;
          }
          .reduceButton {
            width: 30px;
            height: 30px;
            background: rgba(246, 246, 246, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 3px;
            position: absolute;
            left: 670px;
            top: 6px;
            color: #666;
          }
          .updateImg {
            margin-top: 14px;
            display: block;
            width: 76px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: rgba(0, 176, 183, 1);
            border-radius: 3px;
            font-size: 14px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
          .modelDetail {
            display: flex;
            align-items: center;
            height: 168px;
            margin-top: 14px;
            .modelDiv {
              .everyModel {
                cursor: pointer;
                width: 300px;
                margin-right: 12px;
                height: 168px;
                // background: rgba(238, 238, 238, 1);
                border: 1px solid #eee;
                border-radius: 3px;
                position: relative;
                text-align: center;
                .modifyImg {
                  position: absolute;
                  width: 100%;
                  height: 168px;
                  line-height: 168px;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  z-index: 2;
                  background: rgba(0, 0, 0, 0.2);
                  text-align: center;
                  color: #fff;
                  cursor: pointer;
                  font-size: 14px;
                  display: none;
                }
                &:hover .modifyImg {
                  display: block;
                }
                .detailImg {
                  cursor: pointer;
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  max-width: 292px;
                  max-height: 160px;
                }
                .deleteDiv {
                  position: absolute;
                  z-index: 5;
                  right: 10px;
                  top: 10px;
                  width: 37px;
                  height: 37px;
                  background: rgba(0, 0, 0, 1);
                  opacity: 0.3;
                  border-radius: 3px;
                  .deleteImg {
                    margin: 8px;
                    width: 21px;
                    height: 20px;
                  }
                  display: none;
                  cursor: pointer;
                }
                &:hover .deleteDiv {
                  display: block;
                }
              }
            }
          }
        }
      }