في الواجهة الأمامية ، يمكنك استخدام XMLHTTPrequest 2 لتحميل الصور على الخادم. من الطبيعي على أجهزة الكمبيوتر ومعظم الهواتف المحمولة ، ولكن التحميل على عدد صغير من هواتف Android فشل. عند عرض الصورة على الخادم ، يتم عرض عدد وحدات البايت هو 0. هنا هو الرمز الأساسي لتحميل الصورة:
HTML
<type type = "file" id = "اختر" capture = "camera" قبول = "image/*"> javaScriptVar filechooser = document.getElementById ("اختر") ؛ filechooser.onchange = function () {var _this = $ (this) ؛ if (! (files.length> 1) {Alert ("يمكن تحميل صورة واحدة فقط في وقت واحد") ؛ إرجاع ؛} files.foreach (function (file ، i) {if (! /// (؟: jpeg | png | gif) /i file.type) ؛} ؛ reader.readasdataurl (file) ؛}) ؛} ؛ وظيفة تحميل (basestr ، type) {var xhr = new xmlhttprequest () ؛ var text = window.atoB (basestr.split ("،") text.length ؛ (xhr.readyState == 4 && xhr.status == 200) {var jsondata = json.parse (xhr.responsetext) ؛ console.log (jsondata) ؛ e.total)/2 ؛ // استخدم pecent لعرض التحقيق في التحميل} ، خطأ) ؛ xhr.send (formData) ؛} وظيفة getBlob (buffer ، تنسيق) {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 <Porm> في JavaScript في الوقت الفعلي وتقديم النموذج عبر Ajax. في الرمز أعلاه ، يسمى الحقل في النموذج المقدم ImageFile والقيمة هي blob ، وهي عبارة عن نقطة تم إنشاؤها وإعادتها بواسطة وظيفة getBlob. تحميل الملفات من خلال هذه الطريقة بسيطة وبديهية.
ثم نتلقى ونحفظ الصورة على الخادم وإرجاع معلومات الصورة التي تم تحميلها.
فيما يلي مثال على رمز node.js:
var q = require ('q') ؛ var fs = require ('fs') ؛ var path = require ('path') ؛ var formidable = require ('matiDible') ؛ var moment = require ('moment') ؛ var imagePload = function () {} mitterable. pathname) ؛ إرجاع this.useformparsecallback (req) .Then (function (files) {var file = files [1] .imagefile ؛ var fileType = files [1] .imagefile.type.split ('/') [1] Math.Random (). toString (). substr (2 ، 10) + '. efferred.makenoderesolver ()) ؛ إرجاع efferred.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 ؛نحن نستخدم الحزمة الهائلة لتلقي بيانات الملف التي تم تحميلها ، ثم حفظ الملف إلى/دليل/exploadimgs/dealinfo (على افتراض أن الجمهور قد تم تعيينه على الدليل الجذر للستاتية في Express) ، وإعادة تسمية الصورة وفقًا للقواعد المحددة للتأكد من أن الصورة التي تم تحميلها لن يتم الكتابة عليها بسبب الاسم نفسه. بالإضافة إلى ذلك ، يتم استخدام Q في الكود لتجنب استخدام وظائف رد الاتصال مباشرة لوظائف وظيفة منفصلة بشكل أفضل.
يعمل الرمز أعلاه بشكل طبيعي على متصفحات الكمبيوتر ومعظم الأجهزة المحمولة السائدة ، ولكن هناك عدد صغير من أجهزة Android سيكون لها بايت صور تم تحميلها من 0. لأسباب محددة ، يمكنك رؤية الأوصاف على صفحات الويب التالية:
هذا يعني أن هذا خطأ في Android!
فكيف تحلها؟
في الواقع ، يمكن العثور على الإجابة من الصفحة الواردة أعلاه ، أي علينا تغيير طريقة تحميل الملف. في XHR2 ، بالإضافة إلى تحميل الملفات في Blob ، يمكنك أيضًا تحميل الملفات في ArrayBuffer.
فيما يلي رمز JavaScript الأمامي المعدل:
var fileChooser = document.getElementById ("اختيار") ؛ fileChooser.Onchange = function () {var _this = $ (this) ؛ if (! time ") ؛ return ؛} files.foreach (function (file ، i) {if (! /// (؟: jpeg | png | gif) /i file.type) ؛} ؛ reader.readasdataurl (file) ؛}) ؛} ؛ وظيفة تحميل (basestr ، type) {var xhr = new xmlhttprequest () ؛ var text = window.atoB (basestr.split ("،") 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 "requestHeader" لـ "Application/Octet-stream" ، وإلا فلن يتمكن الخادم من الاستجابة للطلب. بالإضافة إلى ذلك ، من خلال تحميل الصور بهذه الطريقة ، لا يمكننا الحصول على نوع الملف من بيانات النموذج. يمكننا تمرير نوع الملف إلى الخادم بطريقة استعلام ، ويقوم الخادم بإنشاء الملف المقابل وفقًا لنوع الملف. فيما يلي رمز الخادم بعد كمية صغيرة من التعديل:
imageUpload.prototype.uploadimageTest = function (req) {var pathName = 'UploadImgs/dealInfo/' ؛ var apploodpath = path.join (__ dirname ، '../../public/' req.query.filetype؟ fs.createwRiteStream (UploadPath + newFilename) ؛ var eferred = q.defer () ؛ readstream.pipe (writestream) ؛ readStream.on ('end' ، deferred.makenoderesolver ()) ؛ إرجاع deferred.promise.then (function () NewFilename ، FilePath: '/' pathname + newFilename ، filemize: file.size/1024> 1024؟يمكن للرمز المعدل دعم هواتف Android ، بما في ذلك متصفحات WeChat. لاحظ أنه ليس كل هواتف Android سيكون لها هذه المشكلة. إذا وجدت أنه لا يمكنك تحميل الصور على هواتف Android ، خاصة في متصفحات WeChat ، يمكنك تجربة الطريقة أعلاه.
ما سبق هو الحل لتحميل الصور إلى 0 باستخدام XMLHTTPrequest 2 في متصفح WeChat لهواتف Android المحمولة. آمل أن يكون ذلك مفيدًا للجميع!