elementUI上传图片限制格式与大小

elementUI上传图片限制格式与大小

天青色等烟雨，而我在等你，月色被打捞起，是否记住了结局

 

结构：
<el-upload action="https://jsonplaceholder.typicode.com/posts/"
           :before-upload="beforeAvatarUpload">
   <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="poster" alt="" />
</el-dialog>
上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

 

 

 

 

事件
beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" ||
        testmsg === "JPG" ||
        testmsg === "png" ||
        testmsg === "PNG" ||
        testmsg === "bpm" ||
        testmsg === "BPM";
      const isLt50M = file.size / 1024 / 1024 < 10;
      if (!extension) {
        this.$message({
          message: "上传图片只能是jpg / png / bpm格式!",
          type: "error"
        });
        return false; //必须加上return false; 才能阻止
      }
      console.log(file);
      if (!isLt50M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "error"
        });
        return false;
      }
      return extension || isLt50M;
    }