在before-upload方法中对图片文件进行处理,并返回处理后的文件

场景:在Vue项目里,利用ElementUI的upload组件,上传图片,在图片上传前,对图片进行压缩。

做法概述:在before-upload方法中对图片文件进行处理,并返回处理后的文件。

本人查看了一下upload的源码,发现,beforeUpload方法中,除了可以返回图片校验时的true/false,还可以以return new Promise的方式返回文件,如返回文件,则上传时,以返回的文件为准上传。

详细代码:

1.源码中有个判定:

const before = this.beforeUpload(rawFile)
if(before && before.then) {
before.then( processedFIle => {
const fileType = Object.prototype.toString.call(processedFIle) // 获取文件的格式
if(fileType === ‘[object File]’ || fileType === ‘[object Blob]’) {

}
})
}
即:如果收到beforeUpload方法中传输过来的参数是File或者Blob格式,则将此文件作为文件参数请求request,否则用原文件rawFile为参数。因此,我们将文件压缩后,转换成File或者Blob格式resolve即可。

2.在beforeUpload方法中添加(代码为手写,已检查,但不保证没有单词写错,如报错,请检查一下单词的拼写):

beforeUpload(file) {
let _this = this
return new Promise((resolve, reject) => {
let isLt2M = file.size / 1024 / 1024 < 10 // 判定图片大小是否小于10MB
if(!isLt2M) {
reject()
}
let image = new Image(), resultBlob = ‘’;
image.src = URL.createObjectURL(file);
image.onload = () => {
// 调用方法获取blob格式,方法写在下边
resultBlob = _this.compressUpload(image);
resolve(resultBlob)
}
image.onerror = () => {
reject()
}
})
},

/* 图片压缩方法-canvas压缩 */
compressUpload(image) {
let canvas = document.createElement(‘canvas’)
let ctx = canvas.getContext(‘2d’)
let initSize = image.src.length
let { width } = image, { height } = image
canvas. width = width
canvas.height = height
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(image, 0, 0, width, height)

// 进行最小压缩0.1
let compressData = canvas.toDataURL('image/jpeg', 0.1)

// 压缩后调用方法进行base64转Blob,方法写在下边
let blobImg = this.dataURItoBlob(compressData)
return blobImg

},

/* base64转Blob对象 */
dataURItoBlob(data) {
let byteString;
if(data.split(’,’)[0].indexOf(‘base64’) >= 0) {
byteString = atob(data.split(’,’)[1])
}else {
byteString = unescape(data.split(’,’)[1])
}
let mimeString = data
.split(’,’)[0]
.split(’:’)[1]
.split(’;’)[0];
let ia = new Uint8Array(byteString.length)
for( let i = 0; i < byteString.length; i += 1) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], {type: mimeString})
}
3.说明:

添加以上代码后,文件传输服务器的时候,传输的是压缩的文件,但在on-success钩子中,参数file、fileList中依然是原图片的信息,即未压缩的图片信息,所以,当在on-success中打印file时,如果打印的文件尺寸没有改变,并不是没有压缩传输成功。如果想要确定是否传输了压缩文件至服务器,可以在接口请求时让后台人员查看一下传输时的文件参数。

完。
————————————————
版权声明:本文为CSDN博主「Jennifer·F」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44134899/article/details/95046994

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值