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

前言：

        我们在使用上传方法的时候，是可以拿到文件的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;
      }
}