In Front-End JS verwenden Sie XMLHTTPREQUEST 2, um Bilder auf den Server hochzuladen. Es ist normal auf PC und den meisten Mobiltelefonen, aber das Hochladen auf einer kleinen Anzahl von Android -Telefonen schlägt fehl. Beim Anzeigen des Bildes auf dem Server wird die Anzahl der Bytes angezeigt.
Html
<input type = "Datei" id = "wählen" capture = "camera" ceapt = "image/*"> javaScriptvar filechooser = document.getElementById ("wählen"); filechoser.onchange = function () {var _this = $ (this); if (! this.files.Legth). (Dateien.Length> 1) {alert ("Nur 1 Bild kann gleichzeitig hochgeladen werden"); return;} Dateien.foreach (Funktion (Datei, i) {if (! /// (?: jpeg | png | gif) /i.Test (Datei.Type)) return; Datei.Type);}; reader.readasDataurl (Datei);});}; Funktion hochladen (BasisESTR, Typ) {var xhr = new xmlhttprequest (); var text = fenster.atob (BasESTR.Slit (",") [1]); text.length; (xhr.readyState == 4 && xhr.status == 200) {var jSondata = json.Parse (xhr.responsext); Konsole.log (jSondata);}}}}}; // Fortschritts -Ereignis zum Anzeigen von Daten senden. / e.total) / 2; // Verwenden Sie makell, um Upload -Fortschritt}, false); xhr.send (formData);} Funktion 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 ([Puffer], {Typ: Format});}}}Der obige Code verwendet FormData, um die Einreichung von Formatendaten zu implementieren. FormData ist ein neuer Datentyp für XHR2. Mit der Verwendung können wir in Echtzeit einfach HTML <form> in JavaScript erstellen und das Formular über AJAX einreichen. Im obigen Code heißt das Feld im eingereichten Formular mit dem Namen ImageFile und der Wert ist Blob, bei dem es sich um eine von der GetBlob -Funktion konstruierte und zurückgegebene Datei -Blob handelt. Das Hochladen von Dateien durch diese Methode ist einfach und intuitiv.
Dann empfangen und speichern wir das Bild auf dem Server und geben die Informationen des hochgeladenen Bildes zurück.
Hier ist ein Beispiel für Node.js Code:
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 förderbar Pathname); zurückgeben. 10) + '.' + Filetyp; Deferred.Promise.then (function () {fs.unlinkSync (Datei.Path); Rückgabe {Dateiname: Newfilename, Filepath: '/' + Pathname + newFileName, filesize: Datei.size/1024> 1024? (~~ (10*). "Kb"};});});}; module.exports = imageUpload;Wir verwenden das beeindruckende Paket, um die hochgeladenen Dateidaten zu empfangen, und speichern die Datei dann in das Verzeichnis/öffentlich/uploadimgs/DealInfo (vorausgesetzt, die Öffentlichkeit wurde auf das Stammverzeichnis von static in Express festgelegt) und benennen das Bild nach den angegebenen Regeln um, um sicherzustellen, dass das hochgeladene Bild nicht überschrieben wird, da dieselbe Namen. Darüber hinaus wird Q im Code verwendet, um die Verwendung von Rückruffunktionen direkt zur besseren separaten Funktionsfunktionen zu vermeiden.
Der obige Code funktioniert normalerweise auf PC -Browsern und den meisten mobilen Mainstream -Geräten. Eine kleine Anzahl von Android -Geräten hat jedoch die hochgeladenen Bild Bytes von 0. Aus bestimmten Gründen können Sie die Beschreibungen auf den folgenden Webseiten sehen:
Das bedeutet, dass dies ein Fehler in Android ist!
Wie kann man es also lösen?
Tatsächlich ist die Antwort auf der oben angegebenen Seite zu finden, dh wir müssen die Datei -Upload -Methode ändern. In XHR2 können Sie neben dem Hochladen von Dateien in Blob auch Dateien in ArrayBuffer hochladen.
Das Folgende ist der geänderte Front-End-JavaScript-Code:
var filechooSer = document.getElementById ("wählen"); filechooser.onchange = function () {var _this = $ (this); if (! this.länge.Length) return; var file = array.prototype.slice.call (this.Files); Zeit "); return;} Dateien.foreach (Funktion (Datei, i) {if (! /// (?: JPEG | PNG | GIF) /i.test (Datei.Type)) return; var reader = new FileReäen (); Reader.Onload = Funktion () {VICRE ERGEBNIS = this.result; upload; upload; upload (ergebend (ergebend), upload (ergebend (ergebend), upload (resend (), (ergebend (ergebend), upload (ergebend (), upload (), (Ergebnis, Datei.Type);}; reader.readasDataurl (Datei);});}; Funktion hochladen (BasisESTR, Typ) {var xhr = new xmlhttprequest (); var text = fenster.atob (BasESTR.Slit (",") [1]); text.length; (xhr.readyState == 4 && xhr.status == 200) {var jSondata = json.Parse (xhr.responsext); Konsole.log (jSondata);}}}}}; // Fortschritts -Ereignis zum Anzeigen von Daten senden. / e.total) / 2; // Verwenden Sie makell, um den Upload -Fortschritt anzuzeigen}, false); xhr.send (buffer.Buffer); // Bild in ArrayBuffer hochladen}Ich werde die Veränderungen hervorheben. Das Hochladen von Bildern im ArrayBuffer-Modus muss den Requestheader von 'Application/Octet-Stream' hinzufügen, da der Server ansonsten nicht auf die Anforderung antworten kann. Darüber hinaus können wir den Dateityp aus den Formulardaten nicht erhalten, indem wir Bilder auf diese Weise hochladen. Wir können den Dateityp auf Abfrage an den Server übergeben, und der Server generiert die entsprechende Datei gemäß dem Dateityp. Das Folgende ist der Servercode nach einer geringen Änderung:
ImageUpload.Prototyp.Uploadimagetest = Funktion (req) {var pathname = 'uploadimgs/DealInfo/'; var UploadPath = path.join (__ DirName, '../ ../public/', Pathname); Req.Query.filetyp? fs.createwritestream (UploadPath + newFileName); var deferred = q.Defer (); readStream.pipe (WriteStream); readStream.on ('end', deferred.makenoderesolver (); Newfilename, Filepath: '/' + PathName + Newfilename, FileSize: Datei.size/1024> 1024?Der geänderte Code kann Android -Telefone, einschließlich WeChat -Browser, unterstützen. Beachten Sie, dass nicht alle Android -Telefone dieses Problem haben. Wenn Sie feststellen, dass Sie Bilder nicht auf Android -Telefonen hochladen können, insbesondere in Wechat -Browsern, können Sie die obige Methode ausprobieren.
Das obige ist die Lösung für das Hochladen von Bildern auf 0 mit XMLHTTPrequest 2 im WeChat -Browser von Android -Mobiltelefonen. Ich hoffe, es wird für alle hilfreich sein!