フロントエンドJSでは、XMLHTTPREQUEST 2を使用してサーバーに画像をアップロードします。 PCおよびほとんどの携帯電話では正常ですが、少数のAndroid携帯電話にアップロードするには失敗します。サーバーで画像を表示するとき、バイト数が表示されます。これは、画像をアップロードするためのコアコードを次に示します。
HTML
<入力型= "ファイル" id = "" capture = "camera" camera "accept =" image/*"> javascriptvar filechooser = document.getElementbyid（" choice "）; filechooser.onchange = function（）{_this = $（this）; if（！this.files.length）return return = var files = array.protoptytype.chall （files.length> 1）{alert（ "1つの画像のみを一度にアップロードできます"）; return;} fileach（file、i）{if（！///（！/// file.type）;}; reader.readasdataurl（file）;}）;}; function upload（basestr、type）{var xhr = new xmlhttprequest（）; var text = window.atob（basestr.split（ "、"）[1]）; var buffer = new uint8array（var i = 0; text.length; i ++）{buffer [i] = charcodeat（i）;} var blob = getblob（buffer、type）; var formdata（）; formdata.append（ 'imagefile'、blob）; xhr.open（ 'post'、 '/uploadtest' （Xhr.ReadyState == 4 && Xhr.Status == 200）{var jsondata = json.parse（xhr.responsetext）; console.log（jsondata）;}}; //進行状況イベントを使用してデータを送信するxhr.upload.adentener（e e.pect '（e） / 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 fromidable = requide（ 'frumidable'）; var yimasupload = function（）{}; imageupload.prototype.useformparsecallback = furce（req）{varferrered = q.deforfer（） fordidable.incomingform（）; form.parse（req、deferred.makenoderesolver（））; return deferred.promise;}; mageupload.prototype.uploadimagetest = function（req）{var pathname = 'uploadimgs/'; '../../public/'、pathname）; this.useformparsecallback（req）.then（files）{var file = files [1] .imagefile; var filetype = files [1] .imagefile.type.split（ '/'）[1]; var newfileName = 'Upload_' + ' +' + ' +' Math.random（）。toString（）。subst（2、10） + '。 deferred.makenoderesolver（））; return deferred.promise.then（function（）{fs.unlinksync（file.path）; return {filename：newFileName、filepath： '/' + pathname + newFileName、filesize、filesize：file.size/1024> 1024> 1024/1024/1024/1024/1024/1024/1024/1024> "mb"：~~（file.size/1024） + "kb"};}）;};}; module.exports = imageupload;手ごわいパッケージを使用してアップロードされたファイルデータを受信し、ファイルを/public/uploadimgs/dealinfoディレクトリに保存し（公開がExpressの静的のルートディレクトリに設定されていると仮定）、指定されたルールに従って画像の名前を変更して、同じ名前のためにアップロードされた画像が上書きされないようにします。さらに、Qはコードで使用され、コールバック関数を直接使用して、より適切な関数関数をより適切にしないようにします。
上記のコードは通常、PCブラウザーとほとんどの主流のモバイルデバイスで動作しますが、少数のAndroidデバイスには0の画像バイトがアップロードされます。特定の理由で、次のWebページで説明を見ることができます。
つまり、これはAndroidのバグです！
それで、それを解決する方法は？
実際、答えは上記のページから見つけることができます。つまり、ファイルアップロード方法を変更する必要があります。 XHR2では、BLOBでファイルをアップロードすることに加えて、ArrayBufferにファイルをアップロードすることもできます。
以下は、変更されたフロントエンドJavaScriptコードです。
var felechooser = documic.getElementbyId（ "choice"）; filechooser.onchange = function（）{var _this = $（this）; if（！this.files.lents）return; var files = array.slice.call（this.files）; if（files.length> 1）; time "） file.type）;}; reader.readasdataurl（file）;}）;}; function upload（basestr、type）{var xhr = new xmlhttprequest（）; var text = window.atob（basestr.split（ "、"）[1]）; var buffer = new uint8array（var i = 0; text.length; i ++）{buffer [i] = charcodeat（i）;} xhr.open（ 'post'、 '/uploadtype ='+type.split（ '/'）[1]） （Xhr.ReadyState == 4 && Xhr.Status == 200）{var jsondata = json.parse（xhr.responsetext）; console.log（jsondata）;}}; //進行状況イベントを使用してデータを送信するxhr.upload.adentener（e e.pect '（e） / e.total） / 2; // pecentを使用してアップロードの進行状況を表示}、false）; xhr.send（buffer.buffer）; // arraybufferに画像をアップロード}変更を強調します。 ArrayBufferモードで画像をアップロードするには、「アプリケーション/Octet-Stream」のRequestheaderを追加する必要があります。そうしないと、サーバーはリクエストに応答できません。さらに、このように写真をアップロードすることにより、フォームデータからファイルタイプを取得することはできません。ファイルタイプをクエリの方法でサーバーに渡すことができ、サーバーはファイルタイプに従って対応するファイルを生成します。以下は、少量の変更後のサーバーコードです。
Imageupload.prototype.uploadimagetest = function（req）{var pathname = 'uploadimgs/dealinfo/'; var uploadpath = path.join（__ dirname、 '..//public/'、pathname）; = req.query.filetype？ = fs.createwriteStream（uploadpath + newFileName）; var Deferred = q.defer（）; readstream.pipe（writestream）; readstream.on（ 'end'、deferred.makenoderesolver（）; NewFileName、Filepath： '/' + PathName + NewFileName、file.size/1024> 1024変更されたコードは、WeChatブラウザーを含むAndroid電話をサポートできます。すべてのAndroid電話がこの問題を抱えているわけではないことに注意してください。 Android携帯電話、特にWeChatブラウザで画像をアップロードできないことがわかった場合は、上記の方法を試すことができます。
上記は、Android携帯電話のWeChatブラウザでXMLHTTPREQUEST 2を使用して画像を0にアップロードするためのソリューションです。私はそれが誰にでも役立つことを願っています！