无法将 BLOB 转换为 base64

如何解决无法将 BLOB 转换为 base64

在将上传的图像发送到后端进行处理之前，我尝试将其转换为 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 始终为 null 在调试时，我可以看到 Promise 仍然悬而未决，这可能是它为空的原因吗？我该如何解决这个问题？

解决方法

试试这个


    @Primary
    @Bean
    public SwaggerResourcesProvider swaggerResourcesProvider(InMemorySwaggerResourcesProvider defaultResourcesProvider) {
        return () -> {
            SwaggerResource wsResource = new SwaggerResource();
            wsResource.setName("Documentation");
            wsResource.setSwaggerVersion("2.0");
            wsResource.setLocation("/swagger.yml");

            List<SwaggerResource> resources = new ArrayList<>(defaultResourcesProvider.get());
            resources.add(wsResource);
            return resources;
        };
    }

如果您将 blob 作为 file 传递，那么您可能可以将 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) )
})