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、file Listでは元のピクチャの情報、すなわち圧縮されていないピクチャ情報であるため、on-successでfileを印刷する場合、印刷されたファイルサイズが変化しなければ、圧縮転送に成功しないわけではない.圧縮ファイルがサーバに転送されたかどうかを確認するには、インタフェースリクエスト時にバックグラウンドに転送時のファイルパラメータを表示させます.
終わります.