在安卓手机微信浏览器中,使用XMLHttpRequest 2(XHR2)进行图片上传时,可能会遇到一个常见的问题,即上传的图片在服务器上显示字节数为0。这通常是由于兼容性或编码处理不当导致的。以下是一些解决这个问题的关键点和相关知识点:
1. **XMLHttpRequest 2**:
XMLHttpRequest 2 是对旧版 XMLHttpRequest 的升级,引入了新的功能,如支持跨域请求、上传进度监听、文件和二进制数据的处理等。在本文中,它是用来实现图片上传的关键。
2. **FormData**:
FormData 对象允许开发者将表单数据组合成键值对,然后通过 XHR2 以 multipart/form-data 的格式发送。这是在不使用表单的情况下,上传文件到服务器的常见方式。
3. **FileReader API**:
FileReader API 允许在浏览器中读取文件(如图片),并将其转换为可用的数据格式。在上述代码中,`FileReader` 用于读取用户选择的图片文件,并将其转化为 base64 编码的字符串。
4. **base64编码与解码**:
base64 是一种将二进制数据编码为 ASCII 字符串的方法,方便在网络上传输。在JavaScript中,`window.atob()` 用于将 base64 字符串解码回原始二进制数据。
5. **Uint8Array**:
在JavaScript中,Uint8Array 是一种用于存储可寻址的、固定大小的整数数组的类型。在这个场景中,用于将解码后的文本数据转换为字节流,以便构造 Blob 对象。
6. **Blob对象**:
Blob 对象表示不可变的、原始数据的类文件对象。在JavaScript中,可以通过 Blob 构造函数创建一个新的 Blob 对象,用于封装字节数据。
7. **WebKitBlobBuilder 和 BlobBuilder**:
这两个是旧版的 Blob 构建器,用于构建和修改 Blob 对象。在某些浏览器中,可能需要使用它们来构建 Blob。不过,现代浏览器通常直接支持 `new Blob()` 构造函数。
8. **上传进度监听**:
使用 `xhr.upload.addEventListener('progress', function (e) {...})` 可以监听文件上传的进度,从而更新用户界面的进度条或其他反馈信息。
9. **Node.js 服务端处理**:
在服务端,例如使用 Node.js,你可以使用 `fs` 模块来处理文件写入操作。通常,你需要接收上传的文件,将其保存到磁盘,并返回确认信息。在示例代码中,可能会缺少具体的文件保存和返回响应的部分。
解决安卓微信浏览器中图片上传字节数为0的问题,可以从以下几个方面着手:
- 确保所有涉及的浏览器版本都支持 XHR2 和 FormData。
- 检查 base64 解码过程是否正确,确保得到的字节数据无误。
- 检查 Blob 构建过程中,数据转换是否正确。
- 确认服务器端接口能够正确解析和处理上传的文件数据。
- 考虑使用兼容性更好的 Blob 构建方法,如 `BlobBuilder` 或 `WebKitBlobBuilder`。
- 调试服务端代码,确保文件保存无误。
通过这些步骤和知识点,应该能够有效地排查和解决问题,使得在安卓手机微信浏览器中使用XMLHttpRequest 2上传图片能正常工作。