不怕代码有bug,就怕代码不报错
我在项目中遇到了一个bug。就是文件转base64的过程中出现了reader里很多的函数都是null,其中包括onload,error等。这个问题困扰了好久。后面有人给了我一个封装好的代码,代码一样,我直接使用,结果错误消失了,我猜应该是数据没有更新。以下是我的代码片段
解决方案:
在JavaScript里封装好一个函数,返回一个Promise对象,再到html中将请求放入
// 图片转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传数据了。