Element-UI框架 —— Upload 上傳(圖片上傳格式和大小判斷)

<el-upload
  class="pic-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  ::on-success="handleUploadSuccess"
  :on-preview="handlePictureCardPreview"
>
</el-upload>

action：上傳地址

on-success：上傳成功

before-upload：驗證

驗證方法：驗證圖片格式和大小

   beforeUpload(file) {
      let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
      const isImage = types.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error('上傳圖片只能是 JPG、JPEG、gif、bmp、PNG 格式!');
        return false;
      }
      if (!isLtSize) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
        return false;
      }
      return true;
    },