图片上传

648 阅读1分钟
 // 读取文件
        onRead(file) {
            let that = this;
            let img = new Image();  //创建对象,这个img就是传给上面的compress
            img.src = file.content
            let reader = new FileReader()
            reader.readAsDataURL(file.file)
            img.onload = function (){//回调
                let id_card = that.compress(img)//这个id_card就是压缩后的一串base64代码,目测3M图片压缩后800kb
                //这下面写接口,这里传base64格式给后台
                const formData = new FormData()
                // 转化成png格式
                const nameImg = new Date().getTime() + '.png'
                formData.append('picture', that.dataURLtoBlob(id_card), nameImg)
                that.$http({
                    url: that.$config.uploadPicture + '?token=' + localStorage.getItem('token'),
                    method: 'post',
                    "Content-Type": 'multipart/form-data',
                    data: formData
                }, (res) => {
                    if(res.code === 0){
                        that.filePath = res.filePath
                    }else{
                        console.log("其它状态码是错误提示")
                    }
                },(error)=>{
                })
            }
        },
        // 压缩图片
        compress(img){
            let url = ''
            var w = Math.min(700, img.width);//当图片像素>700的时候,等比例压缩,这个数字可以调
            var h = img.height * (w / img.width);
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            canvas.width = w
            canvas.height = h
            ctx.drawImage(img, 0, 0, w, h)
            url = canvas.toDataURL('image/png',1)//1代表精细度,越高越好
            return url
        },
        // base64转Blob
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }