无法将 BLOB 转换为 base64答案

【问题标题】：Unable to convert BLOB to base64无法将 BLOB 转换为 base64
【发布时间】：2021-06-20 00:27:33
【问题描述】：

我正在尝试将上传的图片转换为 base64，然后将其发送到后端进行处理，并且我正在使用 readAsDataUrl 进行相同操作，但结果始终为 null，

convertToBase64 () --


    const convertFileToBase64 = file => new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file.rawFile);
    
      reader.onload = () => resolve(reader.result);
      reader.onerror = reject;
    });

斑点：

{
    "rawFile": {
        "path": "Logo.png"
    },
    "src": "blob:http://localhost:3000/5ff2faa0-6f37-4c2e-906a-4c953d146efa",
    "title": "Logo.png"
}

我将此 blob 作为文件参数传递给我的 convertToBase64 方法，但 reader.result 始终为空在调试时，我可以看到承诺仍在等待中且未解决，这可能是它为空的原因吗？我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs file-upload blob react-admin

【解决方案1】：

试试这个

const convertFileToBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.rawFile.path); //path of the file

  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
});

【讨论】：

【解决方案2】：

如果您以 file 的形式传递 blob，那么您可以将 reader.readDataAsURL(file.rawFile) 更改为 reader.readDataAsURL(file)

这对我有用：

index.html

...
<body>
  <input type="file" id='file'/>
  <script src='./app.js'></script>
</body>

app.js

const fileReader = document.getElementById('file')

const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const fr = new FileReader()

    console.log(file instanceof Blob) // Should be true

    fr.readAsDataURL(file)
    fr.onerror = reject
    fr.onload = function () {
      resolve(fr.result)
    }
  })
}

fileReader.addEventListener('change', (e) => {
  getBase64(e.target.files[0]).then((res) => console.log(res) )
})

【讨论】：