图片批量上传并限制图片大小

场景

批量上传图片并需要限制每张图片的上传大小

实现

使用vue+element完成界面，如图：

1.HTML代码：

<template>
  <div class="unload-container">
    <div class="main">
      <span v-show="picList.length == 0"> 单击添加图片 </span>
      <input
        @change="fileChange($event)"
        type="file"
        id="upload_file"
        accept=".jpg,.png"
        multiple
      />
      <ul class="upload-list">
        <li v-for="(item, index) in picList" :key="index">
          <el-image
            :src="item"
            :preview-src-list="picList"
            style="height: 100%"
          >
          </el-image>
          <div class="deleteImg">
            <i class="el-icon-delete" @click="deleteImg(item, index)"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

 2.样式：

.unload-container {
  margin: 0 auto;
  width: 100%;
  .main {
    width: 90%;
    cursor: pointer;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    min-height: 200px;
    overflow: hidden;
    span {
      line-height: 200px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }
    #upload_file {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      filter: alpha(opacity=0);
      -ms-filter: "alpha(opacity=0)";
    }
    .upload-list {
      //   position: relative;
      float: left;
      display: flex;
      min-height: 170px;
      flex-wrap: wrap;
      z-index: 9;
      li {
        width: 140px;
        position: relative;
        margin: 8px 20px;
        height: 140px;
        border: 1px solid #f3f5f5;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;

        .deleteImg {
          width: 140px;
          height: 40px;
          position: absolute;
          top: 105px;
          left: 1px;
          background: rgba(153, 153, 153, 1);
          opacity: 0.6;
          border-radius: 0px 0px 10px 10px;
          margin-top: -50px;
          text-align: center;
          line-height: 36px;
          margin: 0 auto;
          font-size: 26px;
          z-index: 99;
          color: #ffffff;
          i:hover{
              color: red;
              cursor: pointer;
          }
        }
      }
    }
  }
}

3.在data中定义限制的图片张数、图片宽度和图片高度，及图片容器

4.定义方法：

//上传图片 
fileChange(file) {
      var File = [];
      var that = this;
      File = file.target.files;
      var meetFile = [];
      for (let i = 0; i < File.length; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(File[i]);
        reader.onload = function (e) {
          let image = new Image();
          image.src = e.target.result;
          image.onload = function () {
            let w = this.width;
            let h = this.height;
            if (w == that.width && h == that.height) {
              //校验图片像素大小
              meetFile.push(File[i]);
            }
          };
        };
      }
      setTimeout(() => {
        if (meetFile.length != File.length) {
          this.$message.error("上传文件像素不符合要求");
        }
        var picList = this.localPreview(meetFile);
        this.picListNum = this.FileInfoData.length + meetFile.length;
        if (this.picListNum > this.unloadNum) {
          this.$message({
            type: "info",
            message: "最多只能上传" + this.unloadNum + "张",
          });
          return;
        }
        this.picList.push(...picList);
        this.$emit("changepic", this.picList);
        meetFile = Array.prototype.slice.call(meetFile);
        meetFile.forEach((item) => {
          this.FileInfoData.push(item);
        });
      }, 1000);
      console.log(this.picList);
    },
    //获取图片上传的本地路径
    localPreview(list) {
      list = Array.prototype.slice.call(list);
      var arr = [];
      list.forEach((item) => {
        arr.push(window.URL.createObjectURL(item)); //利用window.URL.createObjectURL转换
      });
      return arr;
    },
    //删除图片
    deleteImg(item, index) {
      if (this.FileInfoData[index].fileNbr != undefined) {
        this.fileNbrList.push(this.FileInfoData[index].fileNbr);
        // console.log(this.fileNbrList);
      }
      this.picList.splice(index, 1);
      this.FileInfoData.splice(index, 1);
      this.$emit("changepic", this.picList);
    },

5.测试

 当上传图片超出上传上限弹出提示

 

 

 上传图片不符合规定大小的弹窗警告