七牛云 vue 压缩上传预览图片

最新推荐文章于 2023-07-24 09:40:04 发布

原创最新推荐文章于 2023-07-24 09:40:04 发布 · 863 阅读

1 ·

CC 4.0 BY-SA版权

代码成长实例专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的图片上传组件，该组件能够处理图片的压缩和上传至七牛云存储。文章详细展示了如何使用FileReader API读取图片文件，并通过Canvas进行压缩，最后将压缩后的图片转换为Base64编码并上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <div class="rz-picter">
          <img :src="producImg" class="img-avatar">
          <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage" ref="avatarInput" class="uppic">
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            uploadToken: '',
            producImg: ''
        }
    },
    methods: {
        photoCompress(file,obj,objDiv){
 
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            let that = this
            ready.onload=function(){
                var re=this.result;
                that.canvasDataURL(re,obj,objDiv)
            }
        },
        canvasDataURL(path, obj, callback){
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        },
        convertBase64UrlToBlob(urlData){
            var arr = urlData.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});
        },
        changeImage(e) {
            var file = e.target.files[0]
            let data = new FormData();
            let that = this;
            if(file.size/1024 > 1025){
                this.photoCompress(file,{
                    quality: 0.5
                }, function(base64Codes){
                    //console.log("压缩后：" + base64Codes.length / 1024 + " " + base64Codes);die;
                    file = that.convertBase64UrlToBlob(base64Codes);
                    data.append('token', that.uploadToken);
                    data.append('file', file)
                    that.axios({
                        method: 'post',
                        url: 'http://upload-z2.qiniup.com',
                        data,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                            // 'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(res => {
                        that.producImg = 'http://dingdanimage.ibabybaby.com/' + res.data.key
                    })
                    .catch(err => {
                        Toast(err)
                    })
                }
                )} else {
                    data.append('token', that.uploadToken);
                    data.append('file', file)
                    that.axios({
                        method: 'post',
                        url: 'http://upload-z2.qiniup.com',
                        data,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                            // 'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(res => {
                        that.producImg = 'http://dingdanimage.ibabybaby.com/' + res.data.key
                    })
                    .catch(err => {
                        Toast(err)
                    })
                }
                // data.append('token', this.uploadToken);     //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
                // data.append('file', file);
        }
    },
    created() {
        this.axios.get('/api/order/uploadToken')
        .then(res => {
            this.uploadToken = res.data.uploadToken
        })
        
    },
}
</script>

<style lang="scss" scoped>
.rz-picter {
    position:absolute;
    .img-avatar {
        width: 100px;
        height: 100px;
    }
    .uppic {
        height: 90px;
        width: 90px;
        margin: 0 auto;
        opacity: 0;
        z-index: 99999;
    }
    .img-avatar {
    position: absolute;
    }
}
</style>