五分钟带你了解获取el-upload上传图片的宽高

接到一个新要求：需要获取上传图片的尺寸等一些信息，并对上传元素进行一些限制。
话不多说直接开撸！

思路

上传图片完成后，会获取到文件的基本信息。通过构造函数FilerReader将其转换成Base64。通过Image对象获取图片的宽高，下一步按照需求进行必要判断。

实操

html部分

<el-upload
  action=""
  :http-request="uploadFile"
  :show-file-list="false"
  :disabled="loading"
>
  <el-button :loading="loading" plain icon="el-icon-upload2">
    上传
  </el-button>
</el-upload>

script部分

uploadFile(file) {
   // 定义 filereader对象
   let reader = new FileReader()
   reader.readAsDataUrl(file.file)
   reader.onload = e=>{
       const img = e.target.result;
       const image = new Image()
       image.src=img
       
       image.onload = _=>{
           let width = image.width
           let height= image.height
           
           // 然后就可以做需要的操作了
       }
   }
   
}

最后的话

如果你喜欢我的小作文，请关注我