遇到一个需求,编辑图片,后台给url给我,有就显示默认的,也可以上传或者删除,最后把修改后的文件对象(formData)给后台。上传借助了elementUI,我就想着如果能把url转为file对象,就可以实现了
网上各种收搜:只搜到这种方法 url转file对象
大概这个样子:
// url转文件对象
export function url2File(url: string,imgPos: number): any {
const image = new Image(300,300);
// 给img加上随机值一部分情况下能解决跨域
// image.src = url + '?time=' + new Date().valueOf();
image.src = url;
// 允许跨域操作
image.setAttribute("crossOrigin",'Anonymous');
image.onload = function(){
const base64 = getBase64Image(image);
console.log('b64 ',base64)
let imgDom: HTMLImageElement | null = document.querySelectorAll("ul.el-upload-list li")[imgPos].querySelector('img');
imgDom && imgDom.src = base64.dataURL as string;
const newFile = dataURLtoFile(base64,'name');
console.log('file ',newFile);
return newFile
}
function getBase64Image(img: HTMLImageElement):objectData {
let demoCanvas: any = document.createElement("canvas");
console.log(img.style);
demoCanvas.width = img.width;
demoCanvas.height = img.height;
const ctx = demoCanvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
const ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
const dataURL: string = demoCanvas.toDataURL("image/"+ext);
return {
dataURL,
type: "image/"+ext
};
}
function dataURLtoFile(dataurl: objectData, filename: string) {
const arr = dataurl.dataURL.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1])
let n = bstr.length;
const u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
}
报了这个错
我ts版本:
"typescript": "~3.8.3",
这是什么错误呢,还有关于我这个需求有更好的思路实现的话也忘同行们不吝点拨一下,谢谢!
加括号。