Question

我正在使用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编码这个文件（总是图像）

Answer 1

这个JS Bin是一个将文件转换为base64的工作示例：http://jsbin.com/piqiqecuxo/1/edit?js,console,output。主要的添加似乎是使用<ul> <li></li> <li class="current"></li> <li></li> <li></li> </ul>读取文件，其中FileReader返回base64编码的字符串

FileReader.readAsDataURL()

Answer 2

如果您希望使用一种与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);
  })
}

Reactjs - 不能从react-dropzone编译base64编码文件

2 个答案: