需求:
当图片字段为空的时候,自动为用户上传image文件夹里面的图片
思路:
先获取图片路径,将路径图片内容信息复制给canvas
利用canvas的方法转成base64
将base64转成文件,调用接口上传
getBase64Image(url) {
const img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.src = url;
return new Promise((resolve, reject) => {
img.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
resolve({
success: true,
//canvas.toDataURL的方法将图片的绝对路径转换为base64编码
base64: canvas.toDataURL(),
});
};
img.onerror = () => {
reject({ success: false });
};
});
},
// 默认上传图片
getdefaulupload() {
// 获取1-10随机数 (随机从静态资源中获取到图片)
this.num = Math.floor(Math.random() * 10) + 1;
const imgName = `b${this.num}-on.png`;
const avatarimage = this.avatarimage[this.num-1];
// console.log(imgName,avatarimage);
//调用图片转base64的方法
this.getBase64Image(avatarimage).then((res) => {
var bytes = window.atob(res.base64.split(",")[1]);
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
//base64转成文件
const file = new File([ab], imgName, { type: "image/png" });
const myFormData = new FormData();
myFormData.append("file", file);
上传图片的接口(myFormData).then((res) => {
if (res.status == ERR_OK) {
this.getUser()
}
});
});
},