En JS front-end, usa XMLHTTPREQUEST 2 para cargar imágenes en el servidor. Es normal en la PC y la mayoría de los teléfonos móviles, pero la carga en un pequeño número de teléfonos Android falla. Al ver la imagen en el servidor, el número de bytes se muestra es 0. Aquí está el código central para cargar la imagen:
Html
<input type = "file" id = "elección" captura = "cámara" aceptación = "image/*"> javascriptvar fileChooser = document.getElementById ("elegir"); fileChooser.onchange = function () {var _this = $ (this); if (! this.files.length) return; var de los archivos = array.pototype.slice.call (ccall (ccall (thisfiles); 1) {alerta ("Solo 1 imagen se puede cargar a la vez"); return;} files.forEach (function (file, i) {if (! /// (?: Jpeg | png | gif) /i.test (file.type)) return; var lere = new FileReader (); lerer.onload = function () {var result file.type);}; lector.readasdataurl (file);});}; function upload (basestr, type) {var xhr = new xmlhttprequest (); var text = window.atob (basest.split (",") [1]); var buffer = new Uint8array (text.length); var = 0; text.length; (xhr.readyState == 4 && xhr.status == 200) {var jsondata = json.parse (xhr.ResponseText); console.log (jsondata);}}; // Use el evento de progreso para mostrar los datos enviando progreso xhr.upload.addeventlistener ('progreso', function (e) {otorg. e.total)/2; // use Pecent para mostrar el progreso de carga}, falso); 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});}}El código anterior utiliza FormData para implementar el envío de datos de formulario. FormData es un nuevo tipo de datos diseñado para XHR2. Usándolo, podemos crear fácilmente HTML <Form> en JavaScript en tiempo real y enviar el formulario a través de AJAX. En el código anterior, el campo en el formulario enviado se llama archivo de imagen y el valor es blob, que es un blob de archivo construido y devuelto por la función getBlob. Cargar archivos a través de este método es simple e intuitivo.
Luego recibimos y guardamos la imagen en el servidor y devolvemos la información de la imagen cargada.
Aquí hay un ejemplo de código Node.js:
var q = require ('q'); var fs = require ('fs'); var ruta = require ('ruta'); var formidable = require ('formidable'); var momento = requirir ('momento'); var imageUpload = function () {}; imageUpload.prototype.useformParsEn formidable.InComingForm (); Form.Parse (req, DeFerred.MakeneDeresolver ()); return DeFerred.promise;}; imageUpload.prototype.uploadImageTest = function (req) {var patheNname = 'uploadImgs/trutinfo/'; var upnodpath '../../public/', pathname); devuelve this.useformParsecallback (req) .Then (function (files) {var file = files [1] .ImageFile; var fileType = files [1] .imageFile.type.split ('/') [1]; var newFileName = 'upload_' + momento (). Format ('x') Math.random (). ToString (). Substr (2, 10) + '.' Deferred.MakeneDeresolver ()); 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/1024) "Mb": ~~ (File.Size/1024) + "Kb"};});});}; módulo.exports = imageUpload;Utilizamos el paquete formidable para recibir los datos de archivo cargados y luego guardamos el archivo en el directorio/public/uploadImgs/DealInfo (suponiendo que el público se haya establecido en el directorio raíz de Static en Express), y cambie el nombre de la imagen de acuerdo con las reglas especificadas para asegurarse de que la imagen cargada no se sobrecarga debido al mismo nombre. Además, Q se usa en el código para evitar el uso de funciones de devolución de llamada directamente a mejores funciones de función separadas.
El código anterior funciona normalmente en los navegadores de PC y la mayoría de los dispositivos móviles convencionales, pero un pequeño número de dispositivos Android tendrá los bytes de imagen cargados de 0. Por razones específicas, puede ver las descripciones en las siguientes páginas web:
¡Eso significa que este es un error en Android!
Entonces, ¿cómo resolverlo?
De hecho, la respuesta se puede encontrar en la página dada anteriormente, es decir, tenemos que cambiar el método de carga de archivos. En XHR2, además de cargar archivos en Blob, también puede cargar archivos en ArrayBuffer.
El siguiente es el código JavaScript frontal modificado:
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("Only 1 picture can be uploaded at a tiempo "); return;} files.ForEach (function (file, i) {if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var lector = new FileReader (); Reader.onload = function () {Var result = this.Result; Load (resultado, resultado,, file.type);}; lector.readasdataurl (file);});}; function upload (basestr, type) {var xhr = new xmlhttprequest (); var text = window.atob (basest.split (",") [1]); var buffer = new Uint8array (text.length); var = 0; text.length; (xhr.readyState == 4 && xhr.status == 200) {var jsondata = json.parse (xhr.ResponseText); console.log (jsondata);}}; // Use el evento de progreso para mostrar los datos enviando progreso xhr.upload.addeventlistener ('progreso', function (e) {otorg. e.total)/2; // use Pecent para mostrar el progreso de carga}, falso); xhr.send (buffer.buffer); // cargar imagen en ArrayBuffer}Destacaré los cambios. La carga de imágenes en el modo ArrayBuffer debe agregar el Solicitud de 'Aplicación/Strample de Octet', de lo contrario, el servidor no podrá responder a la solicitud. Además, al cargar imágenes de esta manera, no podemos obtener el tipo de archivo de los datos del formulario. Podemos pasar el tipo de archivo al servidor de manera de consulta, y el servidor genera el archivo correspondiente de acuerdo con el tipo de archivo. El siguiente es el código del servidor después de una pequeña cantidad de modificación:
imageUpload.prototype.uploadImageTest = function (req) {var patheName = 'uploadImgs/trastinfo/'; var uploadPloadPath = path.Join (__ dirname, '../../public/', pathName); devuelve this.useformParsecallback (req) .Then (function (files) {file = file = file = 1]. req.Query.fileType? ('.' + req.query.filetype): '.png'; var newfilename = 'upload_' + momento (). Format ('x') + math.random (). toString (). substr (2, 10) + '.'. fs.CreatewriteStream (uploadPath + newFileName); var deferred = q.defer (); readstream.pipe (writeStream); readStream.on ('end', deferred.MakeneDeResOlver ()); return deferred.promise.then (function () {fs.unlinksync (file.path); return {fileN NewFileName, FilePath: '/' + PathName + NewFileName, filesize: file.size/1024> 1024?El código modificado puede admitir teléfonos Android, incluidos los navegadores WeChat. Tenga en cuenta que no todos los teléfonos Android tendrán este problema. Si encuentra que no puede cargar imágenes en los teléfonos Android, especialmente en los navegadores WeChat, puede probar el método anterior.
Lo anterior es la solución para cargar imágenes a 0 utilizando XMLHTTPREQUEST 2 en el navegador WeChat de los teléfonos móviles Android. ¡Espero que sea útil para todos!