vue 前端等比例压缩图片(再转换成文件后上传后端)

前端压缩图片总的来说还是转base64 然后等比例放小宽和高  这个是上次压缩图片的一个扩展

压缩完之后 再将base64 转成blob再转成文件然后再上传  一生要强的前端崽子（后端不支持base64上传） 自己改吧改吧

 // 图片上传
        async changePic(e) {
            this.isshangchuantupian=true
            this.$message.warning('图片资源正在压缩...')
            // 获取图片数据  
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            let ctempfile
            let _that = this
            reader.onload = await function (event) {
                // 压缩图片  
                var img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var width = img.width
                    var height = img.height
                    if (Math.max(width, height) > _that.maximg) {
                        if (width > height) {
                            canvas.width = _that.maximg;
                            canvas.height = _that.maximg * height / width
                        } else {
                            canvas.height = _that.maximg
                            canvas.width = _that.maximg * width / height
                        }
                    } else {
                        canvas.width = width;
                        canvas.height = height;

                    }
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据  
                    var blob = dataURLToBlob(dataUrl); // 将压缩后的图片数据转换为Blob对象  
                    ctempfile = new File([blob], file.name, { type: 'image/jpeg' }); // 将Blob对象封装为File对象  
                    //console.log(ctempfile)
                    let formData = new FormData()
                    // for (let i = 0; i < fileList.length; i++) {
                    //formData.append('xxxx', fileList[i])
                    //}
                    formData.append('update_image', ctempfile)
                    http
                        .post('服务器地址', formData)
                        .then(res => {
                            //console.log(res.data.update_image)
                            if (res.data.xxxx) {
                              
                                _that.isshangchuantupian=false

                            } else {
                                _that.$message({
                                    message: '图片上传失败：',
                                    type: 'error'
                                })
                            }
                        })
                        .catch(err => {
                            console.log(err)
                        })
                };
            };
            // 将Base64编码的图片数据转换为Blob对象  
            function dataURLToBlob(dataUrl) {
                var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            }
            //let fileList = e.target.files

        },