Vue 限制

最新推荐文章于 2023-05-25 17:20:23 发布

安好ml

最新推荐文章于 2023-05-25 17:20:23 发布

阅读量133

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43943838/article/details/125204244

版权

该代码段展示了在前端进行图片上传时的验证逻辑，包括判断图片文件的大小是否超过10MB，类型是否为JPEG、PNG或GIF，以及尺寸比例是否为2:1。通过`limitFileWH`函数确定图片尺寸比例，`myUpload`函数同步执行所有验证。若验证失败，将显示相应错误提示。

摘要由CSDN通过智能技术生成

   // 判断尺寸是2:1，也可以限制固定尺寸
     limitFileWH(file) {
      const isSize = new Promise(function(resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = (img.width/img.height)%2 === 0;
          valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
      }).then(() => {
        return true;
      }, () => {
        return false;
      });
      return isSize
    },

  // 同步请求
  async myUpload(file) {
      if (file.type) {
        const isLt10M = file.size / 1024 / 1024 < 2
        if (!isLt10M) {
          this.$message.error('图片大小不能超过 10MB!')
          return
        }
        const isImage = file.type
        if (isImage !== 'image/jpeg' && isImage !== 'image/png' && isImage !== 'image/gif') {
          this.$message.error('图片类型是jpg/png/gif')
          return
        }
        var cj = true
        await this.limitFileWH(file).then(res=>{
          cj = res
        })
        if (!cj){
          this.$message.error('尺寸必须是2:1')
          return
        }
   }