beforeUpload(file) { // 文件上传前钩子
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg' //图片格式是否为png或jpg
const isLt10M = file.size / 1024 / 1024 < 10 //判断图片大小是否超过10MB
if (!isJpgOrPng) {
this.$message.error('文件格式错误!')
} else if(!isLt10M) {
this.$message.error('文件过大!')
} else {
const _this = this
return new Promise(resolve => {
const reader = new FileReader()
const image = new Image()
image.onload = (imageEvent) => {
const originWidth = image.width
const originHeight = image.height
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 最大尺寸限制,可通过设置宽高来实现图片压缩程度
let maxWidth = 800, maxHeight = 800
// 目标尺寸
let targetWidth = originWidth, targetHeight = originHeight
// 图片尺寸超过800x800的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
canvas.width = targetWidth
canvas.height = targetHeight
context.clearRect(0, 0, targetWidth, targetHeight)
image.style.background='transparent'
context.drawImage(image, 0, 0, targetWidth, targetHeight)
const dataUrl = canvas.toDataURL('image/png', 0.8) //png格式图片背景不会变黑
const blobData = _this.dataURItoBlob(dataUrl)
resolve(blobData)
}
reader.onload = (e => { image.src = e.target.result; })
reader.readAsDataURL(file)
})
}
return isJpgOrPng && isLt10M
},
// 图片base64编码转化为blob对象方法
dataURItoBlob (dataURI) {
let arr = dataURI.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},
05-31
1127
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)