前端 二进制文件流图片转化异常

Question

有关图片文件流转化的，我在两个不同项目请求了同样的接口，单独写了一个axios，package.json中 axios的版本都是^1.3.5, 然后获取到的 data 格式不同，一个是正常的blob，一个是字符串格式的 '二进制流'

同样的接口，代码，还有什么能影响 接口返回的data呢？第三个图代码是直接复制过去的，除axios版本，配置，后端接口，还有什么因素能影响到 返回结果，content-type 和 responseType 也都相同

Answer 1

引自免费微信小程序：皆我百晓生

面对你所描述的问题，即在两个不同的项目中调用相同的接口但得到的数据格式不一致（一个为Blob，另一个为字符串格式的二进制流），我们可以从几个方面进行深入分析和解决：

1. 检查Axios实例配置

确保两个项目中的Axios实例配置完全一致。特别是responseType参数，它应当被设置为'blob'以便正确地接收二进制数据。

axios.defaults.responseType = 'blob';

2. 审查后端响应头

尽管你说后端接口相同，但可能有微小差异未被注意到。检查两个环境下的后端响应头，尤其是Content-Type和Transfer-Encoding。这些头部信息可能会指示数据是如何编码和传输的。

3. 中间件或代理的影响

考虑是否有网络代理、反向代理或任何中间件（如Nginx、Apache等）在处理请求时修改了响应数据类型。这可能是由于配置差异导致的。

4. 浏览器行为

不同的浏览器可能对二进制数据的处理方式有所不同，尤其是在解析Blob或ArrayBuffer时。尝试在多个浏览器上测试，看是否一致。

5. 代码执行路径

确认两个项目中请求处理的代码路径完全相同。有时候，看似相同的代码块在不同的上下文中可能有不同的行为，尤其是当涉及到异步操作和回调函数时。

6. 检查库版本

除了axios的版本，还要检查其他依赖库的版本，如浏览器的特性支持、编码库等，确保它们在两个项目中是相同的。

7. 日志和调试

增加更多的日志输出点，特别是在处理响应数据之前和之后，这有助于理解数据类型变化的具体位置。

8. 手动转换数据

如果接收到的数据类型不是期望的Blob，可以尝试手动将字符串数据转换回Blob：

const binaryString = 'your_binary_string_here';
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([bytes.buffer], { type: 'image/png' });

9. 与后端沟通

最后，如果上述方法都无法解决问题，可能需要与后端开发人员沟通，了解他们发送数据的具体方式，以及是否存在任何潜在的配置或实现差异。

通过以上步骤，你应该能够定位问题所在并找到相应的解决方案。如果在实施过程中遇到具体的技术障碍，欢迎继续询问。