后端传blob到前端时乱码
时间: 2023-07-26 09:32:16 浏览: 69
如果在后端将 Blob 文件转换为 base64 编码的字符串后,传输到前端时出现乱码问题,可能是由于字符集不匹配导致的。具体来说,可能是在后端将 Blob 文件转换为 base64 编码的字符串时,使用了错误的字符编码,导致前端无法正确解码。
解决这个问题的方法有两种:
1. 在后端将 Blob 文件转换为 base64 编码的字符串时,明确指定字符编码。比如,在 Node.js 中,可以使用 `Buffer` 对象的 `toString()` 方法来指定字符编码,例如 `buffer.toString('base64')`。
2. 在前端将 base64 编码的字符串转换为 Blob 对象时,明确指定字符编码。比如,在 JavaScript 中,可以使用 `atob()` 函数将 base64 编码的字符串解码为二进制数据,然后使用 `Uint8Array` 对象将二进制数据转换为 Blob 对象,例如:
```
let binary = atob(base64String);
let array = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
array[i] = binary.charCodeAt(i);
}
let blob = new Blob([array], {type: 'application/octet-stream'});
```
在以上代码中,使用 `binary.charCodeAt(i)` 指定了字符编码。如果知道具体的字符编码,可以直接使用 `TextEncoder` 和 `TextDecoder` 对象进行编码和解码,避免乱码问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)