Reactjs

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。主要的添加似乎是使用 FileReader 读取文件，其中 FileReader.readAsDataURL() returns 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);
   };
}

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 编码

Reactjs - Can't base64 encode file from react-dropzone

javascript

base64