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