Reactjs - 无法对来自react-dropzone的文件进行base64编码

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()

返回一个 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);
  })
}

Answer 3

使用Base64转换为base64

根据您的代码，我建议使用辅助函数 atob() 进行解码，使用 btoa() 编码为 Base64 了解更多详细信息 单击此处 示例

let base64data = btoa(stringToEncode)

下面是您使用 FileReader() 代替 请求的示例（这是我所做的工作）。

在Reactjs组件中使用FileReader和react-dropzone

为了在 React 中获取文件读取器的内容，我使用了回调函数来更新状态，如 MDN Web 文档中所使用的那样。

反应组件

// state to store the base64 data
const [base64File, setbase64File] = useState(null);

// Create the callback function
const base64Callback = async (err, res) => {
    if (!err) {
      setbase64File(res); // setting the state is the important part 
    } else {
      setbase64File(null);
    }
  };

// call function to convert to base64
onDrop: function (acceptedFiles, rejectedFiles) {
  myFile = acceptedFiles[0];
  getBase64(myFile, base64Callback);

  console.log('Accepted files: ', myFile);
}

转换为base64的函数

async function getBase64(file, callback) {
  const reader = new FileReader();
  reader.onload = () => callback(null, reader.result);
  reader.onerror = (error) => callback(error);
  reader.readAsDataURL(file);
}

export default getBase64;

以上代码是 MDN Web 文档站点代码的修改版本 点击了解更多