图片上传压缩

<input type="file" name="avatar"  id="uploadImage" accept = "image/*" mutiple="mutiple"  @change="handleImgUpload()"  ref="file" class="uppic">

js

handleImgUpload(){
        const files = document.getElementById("#uploadImage")
        const fileLen = this.$refs.file.files
        let name = fileLen[0].name
        var file_name=this.uuid();
        var _file_name_index = name.lastIndexOf('.');
        var _file_name=name.substring(_file_name_index);
        var oss_path = 'dev/donate_project/';//OSS文件目录
        name = oss_path+file_name+_file_name;

            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(),
                img = new Image();

            // 选择的文件对象
            var file = null;
            file = event.target.files[0];
            // 选择的文件是图片
            if(file.type.indexOf("image") == 0) {
                reader.readAsDataURL(file);
            }

            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };

            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            var that = this   
            // base64地址图片加载完毕后
            img.onload = function() {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = 400,
                    maxHeight = 400;
                // 目标尺寸
                var targetWidth = originWidth,
                    targetHeight = originHeight;
                // 图片尺寸超过400x400的限制
                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对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;

                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                
                // canvas转为blob并上传
                canvas.toBlob(function(blob){
                    //在这里实现上传操作
                    // return;
                    HttpInvoice.ossToken().then((res) => {
                        // that.$Indicator.open('Loading...');
                        if(res.code == 1) { 
                            that.isavatar = true;
                            that.toUpload(res.data.region,res.data.accessKeyId,res.data.accessKeySecret,res.data.bucket,res.data.securityToken,blob,name)
                            
                        }else{
                            Toast(res.msg);
                        }
                    })
                },file.type || 'image/png')
            }
    },

toUpload(region,accessKeyId,accessKeySecret,bucket,stsToken,file,name) {          
            const urls = [];
            //oss 基本配置
            var client = new OSS({
                region: region,
                accessKeyId: accessKeyId,
                accessKeySecret: accessKeySecret,
                stsToken: stsToken,
                bucket: bucket
            })
           
                    client.put(name, file).then((res) => {
                        this.uploadfile.push({
                            url: res.res.requestUrls[0],
                            fileUrl: res.res.requestUrls[0],
                            name: res.name,
                        })
                        // this.$Message.success("上传成功");
                        this.avatar = res.url;
                        this.$Indicator.close();
                    }).catch((err) => {
                        console.log(err)
                    })
            this.$emit('getUploadData',this.uploadfile)
        },
        uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        },
    },