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