vue里图片压缩上传组件

Posted 2020-11-14 asnow

//单图上传
<template>
    <div>
            <div class="uploader" v-if=‘!dwimg‘>
                 <van-uploader :after-read="ondwRead" accept="image/gif, image/jpeg" multiple>
                <van-icon name="photograph" />
                </van-uploader>
            </div>
            <p v-if="dwimg" class="img"><img id="img" :src="dwimg" alt="" @click=‘yltp(dwimg)‘><b @click=‘htp‘><van-icon name="close" /></b></p>
                   
    </div>
</template>
<script>
import axios from ‘axios‘
import { Toast } from ‘vant‘;
import { ImagePreview } from ‘vant‘;
import hbsp from ‘@/components/rwlctbcons/hbsp‘
var instance = axios.create({
  headers: {‘Content-Type‘: ‘multipart/form-data‘}
});
export default {
    name:‘hbsp‘,
    data(){
        return{
             imgmurl:‘‘,
             dwimg:‘‘,
        }
    },
    methods:{
        //传值给父组件 父组件监听v-on:dantuEvent=‘function()‘用function接收
        childhbdbimg(){
            console.log(‘1111‘);
            this.$emit(‘dantuEvent‘,this.dwimg)
        },
        //删除
        htp(){
            this.dwimg=‘‘;
        },
        //预览图片
        yltp(dwimg){
            ImagePreview([
            dwimg
            ]);
        },
        ondwRead(file){
            Toast.loading({
                duration: 0,
                mask: true,
                forbidClick: false,
                message: ‘上传中...‘
                });
            //console.log(file.content); 
             console.log(file);//未压缩的file
             let img = new Image();
             img.src = file.content;
             this.dwimg=file.content;
              let that=this;
             img.onload=function(){
                    that.ontpys(img);
                }
            //上传成功的图片
            function fn(){
                setTimeout(() => {
                        if(that.imgmurl){
                             that.dwimg= that.imgmurl;
                             console.log(that.dwimg);
                             that.imgmurl=‘‘;
                             that.childhbdbimg();
                             Toast.clear();
                        }else{
                            fn();
                        }
                }, 1000); 
            };
            fn();
        },

        //压缩图片的方法
        ontpys(img){
            let originWidth = img.width, // 压缩后的宽
            originHeight=img.height,
            maxWidth = 400, maxHeight = 400,
            quality = 0.8, // 压缩质量
            canvas = document.createElement(‘canvas‘),
            drawer = canvas.getContext("2d");
            canvas.width = maxWidth;
            canvas.height = originHeight/originWidth*maxWidth;
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            let base64 = canvas.toDataURL("image/jpeg", quality); // 压缩后的base64图片
            let file = this.dataURLtoFile(base64,Date.parse(Date())+‘.jpg‘);
            file={content:base64,file:file};
            console.log(file);//压缩后的file
            this.onimg(file);
        },
        //base64转file
        dataURLtoFile(dataurl,filename){
        let 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 File([u8arr],filename,{type:mime});
        },
         //图片上传
         onimg(file){
            //console.log(file.content)
            var formData = new FormData();
            formData.append("file", file.file);
             instance({
                url:‘/api/img/upload‘,
                method:‘post‘,
                headers: {
                    ‘token‘: sessionStorage.token
                },
                data:formData
            })
            .then(response=>{
                console.log(response)
                this.imgmurl=response.data.url;
            })
            .catch(error=>{
                console.log(error)
            })
        },

    }
}
</script>
<style scoped>
.rwlctb_div{
padding: 10px 20px;
line-height: 26px;
}

.tb_rwt span{
    display: inline-block;
    width: 100%;
}
.tb_rwt{
    padding: 10px 20px;
}
.tb_rwt span{
    display: inline-block;
    width: 100%;
}
.tb_title{
    text-align: center
}
.van-panel{
    margin-top: 10px;
}
.van-row{
    text-align: center
}
.van-uploader{
    width:1.4rem;
    border:1px solid #999;
    text-align: center;
    height: 1.4rem;
    line-height: 1.4rem;
}
.img{
    width:1.4rem;
    border:1px solid #999;
    text-align: center;
    height: 1.4rem;
    line-height: 1.4rem;
    overflow: hidden;
    position: relative;
}
.img img{
    width: 100%;
}
.img i{
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 11;
}
</style>