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