element-UI 上传多个图片验证

Question

需求：
在上传多个图片的时候有大小限制【不能超过100K】、支持多个上传

问题：
批量上传多个>100K的图片、就是弹出很多的toast、请问有什么方法解决？

Answer 1

贴一下 => 目前我解决的方案：[加锁]

声明加锁

data(){
 return {
       upImageState: true, // 记录上传的状态【加锁、防止重复弹出toads】
    }
}

点击按钮【图片】解锁

methods:{
/*
  * 在点击上传【图片】的时候 进行重置上传状态
  * @event
*/
 setState() {
      this.upImageState = true

 }
}
   

每次onchange 的时候、通过验证 直接上传OSS

async upImagesChange(file, fileList) {
      // 判断文件类型
      const TYPE_REG = /\.(png|jpg|jpeg)$/i
      // 图片大小限制：5M
      const MAX_MB = 1024 * 1024 * 5

      // 再次编辑的时候 【富文本图片个数 + 上传的个数 = sum】限制
      this.UPIMGMNUN += fileList.length

      // 加锁、多次只能执行一次
      this.upImageState = this.upImageState || false

      if (!TYPE_REG.test(file.name) && this.upImageState) {
        this.$message.warning(`【${file.name}】有误，图片格式仅支持jpeg、jpg、png`)
        this.upImageState = false

        return
      }
  }

Answer 2

可以贴更多的错误信息吗？

Answer 3

额外加一个errList，过去直接弹toast的地方，改成把不合要求的文件放到errList里面。
在文件新加到上传队列的时候，用on-change检查

<template>
    <div>
        <el-upload
        ...
        :on-change="verify"
        ...
        />
        Over 100 KB Files
        <div v-for="file in errList" :key="file.uid">
            <i class="el-icon-close" style="color:red"/>{{file.name}}
        </div>
    </div>
</template>
<script>
...
methods:{
    ...
    verify (file) {
      if (file.size / 1024 > 100) {
        // this.$message('file exceed 100KB.')
        this.errList.push(file)
        return false
      }
    },
    ...
}
...
</script>

测试图片：

效果：

Answer 4

//验证图片格式
validateJpgOrPng = (file) => {
        return file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
    }

// 验证图片大小
validateImgSize = (file) => {
    return file.size / 1024 < 100;
}

//上传之前做限制
beforeUpload: file => {
    if (!this.validateJpgOrPng(file)) {
        message.error('请选择jpg/png格式图片');
        return false;
    }
    if (!this.validateImgSize(file)) {
        message.error('图片大小不能超过100K');
        return false;
    }
    return false; //若返回 false 或者返回 Promise 且被 reject，则停止上传。
},

// 选择了文件再次验证
onChange: (file,fileList) => {
    fileList = fileList.filter(file => this.validateJpgOrPng(file) && this.validateImgSize(file));
if (fileList.length > 6) { //这里根据你的需求限制
        message.error('最多只能上传6张图片');
}
    //只能上传6张
    fileList = fileList.slice(0, 6); //这里根据你的需求进行截取，我这里是从前往后截取，你也可以从后往前截取
    console.log(fileList)    //最终拿到的图片列表
},