Reactjs -无法从react- base64中删除编码文件
提问于 2017-01-14 21:57:20
我正在使用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编码(总是图像)
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-14 22:20:56
这个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);
};
}Stack Overflow用户
发布于 2020-06-04 10:45:36
如果你想在一个整洁的方法中使用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);
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41655406
复制
腾讯云开发者
