<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>
七牛云 vue 压缩上传 预览图片
最新推荐文章于 2023-07-24 09:40:04 发布