如何将 blob 转换为 base64？

         axios
            .get(RequestURL, { responseType: 'blob', withCredentials: false })
            .then((response) => {
                let imageNode = document.getElementById('image')
                let imgUrl = window.URL.createObjectURL(response.data)
                console.log(imgUrl)
                setImageServer(imgUrl)
            })

            .catch(function (error) {
                // handle error
                console.log(error)
            })
        

Html

<img id='image' src={ImageServer} alt='Girl in a jacket' /> //getting an actual image(its working)

最重要的是，代码可以正常工作..但问题是将 blob 转换为 base64

目标：- 我正在尝试将此 blob 转换为 base64，以便可以将其保存在本地存储中

我尝试过的：-

var image = document.getElementById('image')
                console.log(image.src)  // blob:http://localhost:3000/1c012729-b104-4fb5-a9a5-39aa782860b4
                var reader = new FileReader()
                reader.readAsDataURL(image.src)
                reader.onloadend = function () {
                    var base64data = reader.result
                    console.log(base64data)
                }
            
        

通过使用这个我收到错误

类型错误：无法在“FileReader”上执行“readAsDataURL”： 参数 1 不是“Blob”类型。

是的，这是在react js中，但是它可以很容易地理解为普通js（仅使用状态）

不知道有什么功能setImageServer()确实如此，这可能是因为URL.createObjectURL()返回一个DOMString（这基本上是一个string type):

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

https://developer.mozilla.org/en-US/docs/Web/API/DOMString https://developer.mozilla.org/en-US/docs/Web/API/DOMString

So your console.log正在打印 blob 对象的字符串表示形式，而不是 blob 本身。你也许可以尝试这个来转换你的DOMString to base64:

https://reference.codeproject.com/book/javascript/base64_encoding_and_decoding https://reference.codeproject.com/book/javascript/base64_encoding_and_decoding