[英]Reactjs - Can't base64 encode file from react-dropzone
我正在使用react-dropzone
处理我网站上的文件上传。 成功加载文件后,dropzone 会触发以下回调:
onDrop: function (acceptedFiles, rejectedFiles) {
myFile = acceptedFiles[0];
console.log('Accepted files: ', myFile);
}
我想对这个文件进行 base64 编码。 做的时候:
var base64data = Base64.encode(myFile)
console.log("base64 data: ", base64data) // => base64 data: W29iamVjdCBGaWxlXQ==W29iamVjdCBGaWxlXQ==
无论文件上传,它总是打印出相同的字符串。
我错过了什么吗? 我需要对这个文件进行 base64 编码(总是图像)
这个 JS Bin 是一个将文件转换为 base64 的工作示例: http : //jsbin.com/piqiqecuxo/1/edit ?js,console, output 。 主要的补充似乎是使用FileReader
读取文件,其中FileReader.readAsDataURL()
返回一个 base64 编码的字符串
document.getElementById('button').addEventListener('click', function() {
var files = document.getElementById('file').files;
if (files.length > 0) {
getBase64(files[0]);
}
});
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
如果您希望以一种适用于 async/await 的简洁方法来实现它,您可以这样做
const getBase64 = async (file: Blob): Promise<string | undefined> => {
var reader = new FileReader();
reader.readAsDataURL(file as Blob);
return new Promise((reslove, reject) => {
reader.onload = () => reslove(reader.result as any);
reader.onerror = (error) => reject(error);
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.