vue获取file文件的宽高等属性

最新推荐文章于 2024-07-20 01:17:19 发布

浩星

最新推荐文章于 2024-07-20 01:17:19 发布

阅读量2.6k

点赞数 4

分类专栏： vue-element vue 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/qq_41619796/article/details/126147020

版权

vue 同时被 2 个专栏收录

110 篇文章 9 订阅

订阅专栏

vue-element

16 篇文章 2 订阅

订阅专栏

该博客介绍了如何在上传图片时通过JavaScript的FileReader API读取图片的宽高信息。在`handleBeforeUpload`方法中，通过创建img元素并设置其src为base64编码的图片数据，在onload事件中获取到图片的width和height，从而实现上传前检查图片尺寸的需求。

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

前言：

我们在使用上传方法的时候，是可以拿到文件的file文件的，里面有很多文件信息，比如size大小等信息，但是没有宽高这类的，那么我们上传图片经常会需要这些属性。

实现效果：

实现步骤：

1、核心js方法：

if (file) {
    var reader = new FileReader()
    reader.onload = function (event) {
      var base64 = event.target.result
      var img = document.createElement('img')
      img.src = base64
      img.onload = function () {
        console.log('宽度', img.width)
        console.log('高度', img.height)
      }
    }
    reader.readAsDataURL(file)
  }

2、页面与对应的js

<el-upload
    ref="uploader"
    :multiple="multiple"
    :accept="accept"
    :action="action"
    :headers="headers"
    :data="data"
    :show-file-list="false"
    :before-upload="handleBeforeUpload"   //在这里
    :on-success="handleSuccess"
    :on-error="handleError"
    :http-request="handleHttpRequest"
  > ...

 handleBeforeUpload(file) {
    //拿数据方法
      if (file) {
        var reader = new FileReader()
        reader.onload = function (event) {
          var base64 = event.target.result
          var img = document.createElement('img')
          img.src = base64
          img.onload = function () { //注意只有onload以后才可以拿到图片信息
            console.log('宽度', img.width)
            console.log('高度', img.height)
          }
        }
        reader.readAsDataURL(file)
      }

        
        //其他方法
      if (this.accept && !this.accept.includes(file.type)) {
        this.$message.error("不接受此文件类型!");
        return false;
      }

      if (this.sizeLimit && file.size > this.sizeLimit * 1024 * 1024) {
        this.$message.error(`文件大小不能超过 ${this.sizeLimit}MB!`);
        return false;
      }
}