1.为了方便使用,我将其封装起来,放在mixins混合中;主要是为了解决文件上传之后,再次上传的问题。
export const imgUrlToFile = {
data() {
return {
};
},
methods: {
// 将图片的url转成file
fileProcess(fileUrl,filename){
let _this=this;
var demoImg = document.createElement("img")
demoImg.src = fileUrl
var img = fileUrl;
var image = new Image();
// 给img加上随机值一部分情况下能解决跨域
// image.src = img + '?time=' + new Date().valueOf();
image.src = img;
// 允许跨域操作
image.setAttribute("crossOrigin",'anonymous');
image.onload = function(){
var base64 = _this.getBase64Image(image);
var newFile = _this.dataURLtoFile(base64,filename);
_this.fileList.push({
name: filename,
url: fileUrl,
raw:newFile
});
// console.log(_this.fileList)
// demoImg.src=base64.dataURL;
// var blob = _this.convertBase64UrlToBlob(base64);
// console.log(blob);
}
},
// 将url转换为base64
getBase64Image(img) {
var demoCanvas = document.createElement("canvas");
demoCanvas.width = img.width;
demoCanvas.height = img.height;
var ctx = demoCanvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 150);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = demoCanvas.toDataURL("image/"+ext);
return {
dataURL: dataURL,
type: "image/"+ext
};
},
//将base64转换为file文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.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});
},
// 将url转换为blob
convertBase64UrlToBlob(base64){
var urlData = base64.dataURL;
var type = base64.type;
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : type});
},
}
};
2.在页面中调用
this.fileProcess(item,name))
参考地址:
https://www.cnblogs.com/liangpi/p/10615000.html
https://blog.csdn.net/qq_42991509/article/details/100925856