上传图片判断上传的图片是横向还是纵向

a濯

于 2024-01-23 14:57:57 发布

阅读量601

点赞数 6

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_46738283/article/details/135771855

版权

文章介绍了使用JavaScript进行文件上传时，如何检测文件大小、创建URL对象处理图片，并基于图片尺寸判断其横向或纵向，确保上传操作的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 uploadFile(event) {
      event.preventDefault();
      this.fd = new FormData(); //内置方法new FormData()  新建一个表格
      const files = event.target.files;
      // 文件大小限制
      if (files[0].size > 2 * 1024 * 1024) {
        this.$message.error("文件大小不能超过2M");
        return;
      }
      this.file = event.target.files[0]; // 获取上传的图片文件对象
      const image = new Image();
      image.src = URL.createObjectURL(this.file); // 设置图片源路径

      image.onload = () => {
        if (image.width >= image.height) {
          this.isHorizontal = true; // 图片为横向
          console.log("图片为横向");
           this.fd.append("file", files[0]);
     		 this.loading = true;
     		 file(this.fd).then((res) => {
       		 if (res.data.code == 200) {
         		console.log(res)
        		}
      			});
        } else {
          this.isHorizontal = false; // 图片不是横向
          console.log("图片是纵向");
        }

        URL.revokeObjectURL(image.src); // 清除内存中的临时URL地址
      };
      
     
    },