87,987
社区成员
发帖
与我相关
我的任务
分享
blobToDataURL (blob) {
console.log(blob);
var reader ;
return new Promise((resolve, reject) => {
reader = new FileReader()
reader.addEventListener('error', (err) => {
console.log(err);
reject(err)
})
console.log(111);
reader.addEventListener('load', () => {
resolve(reader.result) // reader.result即为包含文件内容的字符串
})
reader.readAsDataURL(blob)
})
},
canvasDataURL(path, obj, callback) {
let img = new Image();
img.src = path;
let vuethis = this;
img.onload = function() {
let that = this;
// 默认按比例压缩
let w = that.width;
let h = that.height;
let scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
let quality = 0.7; // 默认图片质量为0.7
// 生成canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
// 创建属性节点
let anw = document.createAttribute("width");
anw.nodeValue = w;
let 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值越小,所绘制出的图像越模糊
let base64 = canvas.toDataURL(vuethis.file.type, quality);
// 回调函数返回base64的值
callback(base64);
};
},
convertBase64UrlToBlob(urlData) {
let arr = urlData.split(","); let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
async islimit1M(isLt1M, file) {
console.log(isLt1M);
console.log(file);
console.log(++this.count);
let re = null;
if (!isLt1M) {
console.log("0000");
re = await this.blobToDataURL(file);
console.log("149",re);
this.canvasDataURL(re, { width: 600, height: 600, quality: 1 }, async (base64Codes) => {
//file = this.convertBase64UrlToBlob(base64Codes);
//console.log("file", file);
//if(file.size / 1024 /1024 >1){
//var re1 = null;
//re1 = await this.blobToDataURL(file);
//console.log(re1);
//}
this.canvasDataURL(base64Codes, { width: 550, height: 550, quality: 1 },(base64) => {
console.log(base64);
file = this.convertBase64UrlToBlob(base64);
console.log("file", file.size / 1024 / 1024);
let fd = new FormData();
fd.append("file", file, this.file.name); // 第三个参数,设置文件的名称(可选的)
fd.append("id", this.id);
for (var pair of fd.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
if(pair[0] === "file") {
console.log(pair[1].name);
console.log(pair[1].type);
console.log(pair[1].size / 1024 / 1024);
}
}
// 提交FormData类型数据
// 更新父组件中的头像
Updateuseravatar(fd).then(res => {
if (res.code == 200) {
this.$emit("updateavatar", res.result);
this.$toast.success("上传成功");
this.$emit("close");
} else {
console.log(res);
this.$toast.fail("上传失败");
this.$emit("close");
}
}).catch(err => {
console.log(err);
this.$toast.fail("上传失败");
this.$emit("close");
});
});
});
} else {
let fd = new FormData();
fd.append("file", file, this.file.name); // 第三个参数,设置文件的名称(可选的)
fd.append("id", this.id);
// 提交FormData类型数据
// 更新父组件中的头像
Updateuseravatar(fd).then(res => {
if (res.code == 200) {
this.$emit("updateavatar", res.result);
this.$refs.image = null;
this.$emit("close");
this.$toast.success("上传成功");
} else {
this.$toast.fail("上传失败");
this.$emit("close");
}
}).catch(err => {
console.log(err);
this.$toast.fail("上传失败");
this.$emit("close");
});
}
}