No JS front-end, você usa o XMLHTTPREQUEST 2 para fazer upload de imagens no servidor. É normal no PC e na maioria dos telefones celulares, mas o upload em um pequeno número de telefones Android falha. Ao visualizar a imagem no servidor, o número de bytes é exibido é 0. Aqui está o código principal para fazer upload da imagem:
Html
<input type = "file" id = "escolha" capture = "camera" aceite = "image/*"> javascriptVar filechooser = document.getElementById ("escolha"); filechooser.onChange = function () {var _this = $ (this); if (! this.files.l) revolt; (files.length> 1) {alert ("apenas 1 imagem pode ser carregada por vez"); return;} files.foreach (function (arquivo, i) {if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; file.type);}; reader.readasDataurl (file);});}; função upload (bashet, tipo) {var xhr = new xmlHttPrequest (); var text = wail.atob.atob (Basest.split (",") [1]); text.length; (xhr.readyState == 4 && xhr.status == 200) {var jSondata = json.parse (xhr.ResponseText); console.log (jsondata);}}; // use o progresso para exibir o progresso do progresso XHR.UPLOAD.ADDEVENTENTENTEN ( * E.Total)/2; // Use Pecent para exibir o progresso do upload}, false); xhr.send (formData);} função getBlob (buffer, formato) {var construstor = window.webkitblobbuilder || window.mozblobbuilder; if (construtor) {var Builder = new Builder (); Builder.append (buffer); retornar construtor.getblob (formato);} else {return window.blob ([buffer], {type: format});}}}}}}}}}}}}}}}}}}}}}}}}}}}O código acima usa o FormData para implementar o envio de dados do formulário. FormData é um novo tipo de dados projetado para XHR2. Usando -o, podemos criar facilmente HTML <Form> em JavaScript em tempo real e enviar o formulário via Ajax. No código acima, o campo no formulário enviado é nomeado ImageFile e o valor é o blob, que é um blob de arquivo construído e devolvido pela função GetBlob. O upload de arquivos através deste método é simples e intuitivo.
Em seguida, recebemos e salvamos a imagem no servidor e retornamos as informações da imagem carregada.
Aqui está um exemplo do código Node.js:
var q = requer ('q'); var fs = requer ('fs'); var path = requer ('caminho'); var formidável = requer ('formidável'); var momento = requer ('momento'); var imagePload = function () {}; imageUpload.protype.useformParSecallback = () {}; formidable.incomingForm (); form.parse (req, adiado.makenoderresolver ()); retorno adiado.promise;}; imageupload.prototype.uploadImageTest = function (req) {var pathname = 'uploadImgs/revenInfo/' wathPath) '../../public/', pathname); retorne este.useformParSecallback (req) .then (function (arquivos) {var file = files [1] .ImageFile; var fileType = arquivos [1] .ImageFile.Type.Split ('/') [1]; varfilename = 'uplroad_' Math.random (). diferred.makenoderresolver ()); return adferred.promise.then (function () {fs.unlinksync (file.path); return {filename: newfilename, filepath: '/' + pathname + newfilename, fileize.size/1024> 1024? "Mb": ~~ (file.size/1024) + "kb"};});});}; module.exports = imageupload;Utilizamos o pacote formidável para receber os dados do arquivo enviado e, em seguida, salvarmos o arquivo no diretório/public/uploadimgs/dealinfo (supondo que o público tenha sido definido como o diretório raiz do estático em expresso) e renomeie a imagem de acordo com as regras especificadas para garantir que a imagem carregada não seja substituída por causa do mesmo nome. Além disso, q é usado no código para evitar o uso diretamente de funções de retorno de chamada para melhorar as funções de função separadas.
O código acima funciona normalmente nos navegadores de PC e na maioria dos dispositivos móveis mainstream, mas um pequeno número de dispositivos Android terá os bytes de imagem enviados de 0. Por razões específicas, você pode ver as descrições nas seguintes páginas da web:
Isso significa que este é um bug no Android!
Então, como resolvê -lo?
De fato, a resposta pode ser encontrada na página fornecida acima, ou seja, precisamos alterar o método de upload de arquivos. No XHR2, além de fazer upload de arquivos no BLOB, você também pode fazer upload de arquivos no ArrayBuffer.
A seguir, é apresentado o código JavaScript de front-end modificado:
var filechooser = document.getElementById ("escolha"); filechooser.onchange = function () {var _This = $ (this); if (! this.files.length) return; var arquivos = Array.prototype.slice.call (this.files); if (arquivos.lgth> 1) {aler. tempo "); return;} arquivos.foreach (function (arquivo, i) {if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var leitor = new fileReader (); reade.onload = function () {var resultado file.type);}; reader.readasDataurl (file);});}; função upload (bashet, tipo) {var xhr = new xmlHttPrequest (); var text = wail.atob.atob (Basest.split (",") [1]); text.length; (xhr.readyState == 4 && xhr.status == 200) {var jSondata = json.parse (xhr.ResponseText); console.log (jsondata);}}; // use o progresso para exibir o progresso do progresso XHR.UPLOAD.ADDEVENTENTENTEN ( * e.Total)/2; // Use Pecent para exibir o progresso do upload}, false); xhr.send (buffer.buffer); // Faça o upload da imagem no ArrayBuffer}Vou destacar as mudanças. O upload de imagens no modo ArrayBuffer deve adicionar o RequestHeader do 'Aplicativo/Octet-Stream'; caso contrário, o servidor não poderá responder à solicitação. Além disso, fazendo upload de imagens dessa maneira, não podemos obter o tipo de arquivo dos dados do formulário. Podemos passar o tipo de arquivo para o servidor de maneira consulta e o servidor gera o arquivo correspondente de acordo com o tipo de arquivo. A seguir, o código do servidor após uma pequena quantidade de modificação:
imageupload.prototype.uploadImageTest = function (req) {var pathname = 'uploadImgs/dealInfo/'; var uPLOPPATH = path.join (__ DirName, '../../public/' Pathname); retorna this.useformParSeclback (req). req.Query.Filetype? fs.CreateWritEstream (uploadPath + newFileName); var newfilename, filepath: '/' + pathname + newFileName, fileSize: file.size/1024> 1024?O código modificado pode suportar telefones Android, incluindo navegadores do WeChat. Observe que nem todos os telefones Android terão esse problema. Se você achar que não pode enviar imagens em telefones Android, especialmente nos navegadores do WeChat, você pode experimentar o método acima.
O exposto acima é a solução para fazer upload de imagens para 0 usando o XMLHTTPREQUEST 2 no navegador WeChat dos telefones celulares Android. Espero que seja útil para todos!