不怕代码有bug,就怕代码不报错
我在项目中遇到了一个bug。就是文件转base64的过程中出现了reader里很多的函数都是null,其中包括onload,error等。这个问题困扰了好久。后面有人给了我一个封装好的代码,代码一样,我直接使用,结果错误消失了,我猜应该是数据没有更新。以下是我的代码片段
解决方案:
在JavaScript里封装好一个函数,返回一个Promise对象,再到html中将请求放入 .then
里,直接使用Promise对象里值。
// 图片转Base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
let imgBase64 = '';
reader.readAsDataURL(file);
// reader.onload = () => {
// imgBase64 = reader.result;
// };
reader.onload = () => {
imgBase64 = reader.result;
};
reader.onerror = error => reject(error);
reader.onloadend = () => resolve(imgBase64);
});
}
以下是base64转图片的代码块
//base64转图片
function base64ImgtoFile(dataurl, filename = 'filename') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}
再到需要调用的位置附上以下代码,请求部分已省略
getBase64(input.files[0]).then((result) => {
var files = result;
console.log("files", result);
$.ajax({
url: sysurl + "ajax/LogisticsFunc.ashx",
data: {
"file": files,
},
···
})
})
这样就可以转base64传数据了。