Vue + Element-ui 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, file);
            resolve(resultBlob)
        }
        image.onerror = () => {
            reject()
        }
    })
},

/* 图片压缩方法-canvas压缩 */
compressUpload(image, file) {
    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(file.type || '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时，如果打印的文件尺寸没有改变，并不是没有压缩传输成功。如果想要确定是否传输了压缩文件至服务器，可以在接口请求时让后台人员查看一下传输时的文件参数。

完。