上传文件转base64，base64转图片

不怕代码有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传数据了。