关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

前端JS中使用XMLHttpRequest 2上传图片到服务器，PC端和大部分手机上都正常，但在少部分安卓手机上上传失败，服务器上查看图片，显示字节数为0。下面是上传图片的核心代码：

HTML

<input type="file" id="choose" capture="camera" accept="image/*"> JavaScriptvar filechooser = document.getElementById（"choose"）;filechooser.onchange = function （） {var _this = $（this）;if （！this.files.length） return;var files = Array.prototype.slice.call（this.files）;if （files.length > 1） {alert（"一次只能上传1张图片"）;return;}files.forEach（function （file, i） {if （！//（?:jpeg|png|gif）/i.test（file.type）） return;var reader = new FileReader（）;reader.onload = function （） {var result = this.result;upload（result, file.type）;};reader.readAsDataURL（file）;}）;};function upload（basestr, type）{var xhr = new XMLHttpRequest（）;var text = window.atob（basestr.split（","）[1]）;var buffer = new Uint8Array（text.length）;var pecent = 0;for （var i = 0; i < text.length; i++） {buffer[i] = text.charCodeAt（i）;}var blob = getBlob（buffer, type）;var formdata = new FormData（）;formdata.append（"imagefile", blob）;xhr.open（"post", "/uploadtest"）;xhr.onreadystatechange = function （） {if （xhr.readyState == 4 && xhr.status == 200） {var jsonData = JSON.parse（xhr.responseText）;console.log（jsonData）;}};//利用progress事件显示数据发送进度xhr.upload.addEventListener（"progress", function （e） {pecent = ~~（100 * e.loaded / e.total） / 2;// 利用pecent来显示上传进度}, false）;xhr.send（formdata）;}function getBlob（buffer, format）{var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;if（Builder）{var builder = new Builder（）;builder.append（buffer）;return builder.getBlob（format）;} else {return new window.Blob（[ buffer ], {type: format}）;}}

上述代码使用FormData来实现表单数据提交。FormData是一种针对XHR2设计的新型数据类型，使用它我们可以很方便地实时以JavaScript创建HTML <Form>，然后通过AJAX提交该表单。在上述代码中，提交的表单中的字段名为imagefile，值是blob，这是一个通过getBlob函数构造并返回的文件Blob。通过该方法上传文件简单直观。

然后我们在服务端接收并保存图片，并返回已上传的图片的信息。
下面是Node.js代码的示例：

var Q = require（"q"）;var fs = require（"fs"）;var path = require（"path"）;var formidable = require（"formidable"）;var moment = require（"moment"）;var imageUpload = function （）{ };imageUpload.prototype.useFormParseCallback = function（req）{var deferred = Q.defer（）;var form = new formidable.IncomingForm（）;form.parse（req, deferred.makeNodeResolver（））;return deferred.promise;};imageUpload.prototype.uploadImageTest = function（req）{var pathName = "uploadImgs/dealInfo/";var uploadPath = path.join（__dirname, "../../public/", pathName）;return this.useFormParseCallback（req）.then（function（files）{var file = files[1].imagefile;var fileType = files[1].imagefile.type.split（"/"）[1];var newFileName = "upload_" + moment（）.format（"x"） + Math.random（）.toString（）.substr（2, 10） + "." + fileType;var readStream = fs.createReadStream（file.path）;var writeStream = fs.createWriteStream（uploadPath + newFileName）;var deferred = Q.defer（）;readStream.pipe（writeStream）;readStream.on（"end", deferred.makeNodeResolver（））;return deferred.promise.then（function（） {fs.unlinkSync（file.path）;return {fileName: newFileName,filePath: "/" + pathName + newFileName,fileSize: file.size/1024 > 1024 ? （~~（10*file.size/1024/1024））/10 + "MB" : ~~（file.size/1024） + "KB"};}）;}）;};module.exports = imageUpload;

我们使用formidable这个包来接收上传文件的数据，然后将文件保存到/public/uploadImgs/dealInfo目录下（假定已在express中将public设置为static的根目录），并将图片按照指定的规则重命名，以保证上传图片不会因为名称相同而被覆盖。另外，代码中使用Q来避免直接使用回调函数，以更好地对函数功能进行分离。

上面的代码在PC端浏览器以及大部分主流移动设备上都能正常工作，但是少部分Android设备上却会出现上传的图片字节数为0的情况。具体的原因大家可以看下面几个网页中的描述：

就是说这个是Android的一个bug！

那如何解决呢？

其实从上面给出的页面中可以找到答案，就是我们得换一种文件上传方式。在XHR2中，除了以Blob的方式上传文件外，还可以ArrayBuffer的方式上传文件。
下面是修改之后的前端JavaScript代码：

var filechooser = document.getElementById（"choose"）;filechooser.onchange = function （） {var _this = $（this）;if （！this.files.length） return;var files = Array.prototype.slice.call（this.files）;if （files.length > 1） {alert（"一次只能上传1张图片"）;return;}files.forEach（function （file, i） {if （！//（?:jpeg|png|gif）/i.test（file.type）） return;var reader = new FileReader（）;reader.onload = function （） {var result = this.result;upload（result, file.type）;};reader.readAsDataURL（file）;}）;};function upload（basestr, type）{var xhr = new XMLHttpRequest（）;var text = window.atob（basestr.split（","）[1]）;var buffer = new Uint8Array（text.length）;var pecent = 0;for （var i = 0; i < text.length; i++） {buffer[i] = text.charCodeAt（i）;}xhr.open（"post", "/uploadtest?filetype=" + type.split（"/"）[1]）;xhr.setRequestHeader（"Content-Type", "application/octet-stream"）;xhr.onreadystatechange = function （） {if （xhr.readyState == 4 && xhr.status == 200） {var jsonData = JSON.parse（xhr.responseText）;console.log（jsonData）;}};//利用progress事件显示数据发送进度xhr.upload.addEventListener（"progress", function （e） {pecent = ~~（100 * e.loaded / e.total） / 2;// 利用pecent来显示上传进度}, false）;xhr.send（buffer.buffer）; // 以ArrayBuffer的方式上传图片}

我将有变化的地方加了高亮显示。以ArrayBuffer方式上传图片必须添加"application/octet-stream"的RequestHeader，否则服务器无法响应请求。另外，通过这种方式上传图片我们也无法从表单数据中获取到文件类型，可以将文件类型以query的方式传到服务器，然后服务器根据文件类型来生成对应的文件，以下是经过少量修改之后的服务器代码：

imageUpload.prototype.uploadImageTest = function（req）{var pathName = "uploadImgs/dealInfo/";var uploadPath = path.join（__dirname, "../../public/", pathName）;return this.useFormParseCallback（req）.then（function（files）{var file = files[1].file;var fileType = req.query.filetype ? （"." + req.query.filetype） : ".png";var newFileName = "upload_" + moment（）.format（"x"） + Math.random（）.toString（）.substr（2, 10） + "." + fileType;var readStream = fs.createReadStream（file.path）;var writeStream = fs.createWriteStream（uploadPath + newFileName）;var deferred = Q.defer（）;readStream.pipe（writeStream）;readStream.on（"end", deferred.makeNodeResolver（））;return deferred.promise.then（function（） {fs.unlinkSync（file.path）;return {fileName: newFileName,filePath: "/" + pathName + newFileName,fileSize: file.size/1024 > 1024 ? （~~（10*file.size/1024/1024））/10 + "MB" : ~~（file.size/1024） + "KB"};}）;}）;};

修改之后的代码可以支持Android手机，包括微信浏览器。注意不是所有的Android手机都会存在该问题，如果你发现在Andriod手机上无法上传图片，尤其是在微信浏览器中，则可以尝试下上面的方法。

以上所述是小编给大家介绍的关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法，希望对大家有所帮助！