В передней части JS вы используете Xmlhttprequest 2 для загрузки изображений на сервер. Это нормально на ПК и большинстве мобильных телефонов, но загрузка на небольшое количество телефонов Android не удается. При просмотре изображения на сервере отображается количество байтов.
HTML
<input type = "file" id = "Выберите" capture = "camera" Accement = "Image/*"> javascriptVar fileChooser = document.getElementById ("Выберите"); fileChooser.onchange = function () {var _This = $ (this); if (! this.files.length) return; (files.length> 1) {alert ("только 1 изображение может быть загружено за раз"); return;} files.foreach (function (file, i) {if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; vareer = new filereader (); oreverder. file.type);}; reader.readasdataurl (file);});}; функция upload (basest, type) {var xhr = new xmlhttprequest (); var text = window.atob (basest.split (",") [1]); var buffer = uint8ray (text.length); Text.length; (xhr.readystate == 4 && xhr.status == 200) {var jsondata = json.parse (xhr.responsetext); console.log (jsondata);}}; // Событие прогресса для отображения данных. e.total)/2; // Использование для отображения прогресса загрузки}, false); xhr.send (formData);} функция 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. Используя его, мы можем легко создать HTML <Form> в JavaScript в режиме реального времени и отправить форму через AJAX. В приведенном выше коде поле в отправленной форме называется ImageFile, а значение - Blob, которая представляет собой каплю, построенный и возвращаемый функцией GetBlob. Загрузка файлов с помощью этого метода проста и интуитивно понятна.
Затем мы получаем и сохраняем изображение на сервере и возвращаем информацию загруженного изображения.
Вот пример кода 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.prototyphy. useformparsecallback = requred = q. formidable.incommingForm (); form.parse (req, deferred.makenoderesolver ()); return deferred.promise;}; imageUpload.prototype.uploadimageTest = function (req) {var pathname = 'oploadimgs/dealinfo/'; var oploadpath = path.joinme (__ dirame -pupluble, pirm. pathname); return this.useformparsecallback (req) .then (function (files) {var file = file [1] .imagefile; var filetype = files [1] .imagefile.type.split ('/') [1]; var newfilename = 'upload_' + moment (). Format ('x') +; Math.random (). ToString (). Substr (2, 10) + '. deferred.makenoderesolver ()); return deferred.promise.then (function () {fs.unlinksync (file.path); return {filename: newfilename, filePath: '/' + pathname + newfilename, файл размером: file.size/1024> 1024? "Mb": ~~ (file.size/1024) + "Kb"};});});}; module.exports = imageUpload;Мы используем грозный пакет для получения загруженных данных файлов, а затем сохраняем файл в каталог/public/uploadimgs/dealinfo (при условии, что публика была установлена в корневом каталоге Static в Express) и переименовано в изображение в соответствии с указанными правилами, чтобы гарантировать, что загруженное изображение не будет перезаписано из -за того же названия. Кроме того, Q используется в коде, чтобы избежать использования функций обратного вызова непосредственно для лучших отдельных функций функций.
Приведенный выше код работает нормально в браузерах ПК и большинстве основных мобильных устройств, но небольшое количество устройств Android будет иметь загруженные байты изображения 0. По конкретным причинам вы можете увидеть описания на следующих веб -страницах:
Это означает, что это ошибка в Android!
Так как это решить?
Фактически, ответ можно найти со страницы, приведенной выше, то есть мы должны изменить метод загрузки файла. В XHR2, в дополнение к загрузке файлов в Blob, вы также можете загружать файлы в ArrayBuffer.
Ниже приведено модифицированный код JavaScript Front-End:
var fileChooser = document.getElementById ("Выберите"); fileChooser.onchange = function () {var _This = $ (this); if (! this.files.length) return; var files = array.prototype.slice.call (это. время "); return;} files.foreach (function (file, i) {if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var reater = new fileReader (); reader.onload = funct file.type);}; reader.readasdataurl (file);});}; функция upload (basest, type) {var xhr = new xmlhttprequest (); var text = window.atob (basest.split (",") [1]); var buffer = uint8ray (text.length); Text.length; (xhr.readystate == 4 && xhr.status == 200) {var jsondata = json.parse (xhr.responsetext); console.log (jsondata);}}; // Событие прогресса для отображения данных. e.total)/2; // Использовать pecent для отображения прогресса загрузки}, false); xhr.send (buffer.buffer); // загружать изображение в ArrayBuffer}Я выставлю изменения. Загрузка изображений в режиме ArrayBuffer должна добавить HeadHeader «Приложение/октет-поток», в противном случае сервер не сможет ответить на запрос. Кроме того, загрузив изображения таким образом, мы не можем получить тип файла из данных формы. Мы можем передать тип файла на сервер в способе запроса, и сервер генерирует соответствующий файл в соответствии с типом файла. Ниже приведен код сервера после небольшого объема модификации:
imageUpload.prototype.uploadimageTest = function (req) {var pathname = 'uploadimgs/dealinfo/'; var oploadpath = path.join (__ dirname, '../../public/', pathname); вернуть это. req.query.filetype? fs.createwritestream (uploadpath + newfilename); var deferred = q.defer (); readstream.pipe (writestream); readstream.on ('end', deferred.makenderesolver ()); return deferred.promise.then (function () {fs.unlinkshync (file.path. NewFilename, filePath: '/' + pathname + newfilename, filesize: file.size/1024> 1024?Модифицированный код может поддерживать телефоны Android, включая браузеры WeChat. Обратите внимание, что не все телефоны Android будут иметь эту проблему. Если вы обнаружите, что вы не можете загружать изображения на телефонах Android, особенно в браузерах WeChat, вы можете попробовать приведенный выше метод.
Выше приведено решение для загрузки изображений в 0 с использованием Xmlhttprequest 2 в браузере WeChat мобильных телефонов Android. Я надеюсь, что это будет полезно для всех!