NodeJS menangani unggahan file
Di Express4, Req.Files undefined ; Yang paling banyak digunakan sekarang mungkin formidable . Anda tahu bahwa ia memiliki acara progress , jadi Anda sangat gembira. Bilah kemajuan dari versi yang lebih rendah dari IE adalah kesempatan; Oke, coba:
Form .on ('error', function (err) {console.log (err);}) .on ('aborted', function () {console.log ('aborted');}) .on ('progress', function (bytesReceived, bytesexpected) {var ' n = parseInt (parsefloat (byteseReceived/bytesexpected) .tofixed (2)*100);Ya, Anda senang melihat bahwa konsol mencetak serangkaian nilai kemajuan seperti yang diharapkan; Kemudian, melangkah lebih jauh;
Formulir .on ('progres', function (bytesreceived, bytesexpected) {var n = parseInt (parsefloat (bytesReceived/bytesexpected) .tofixed (2)*100); res.write ('<script> window.parent.call ('+n+') </script>'); Metode call adalah untuk menampilkan nilai kemajuan pada halaman; Sayangnya, Anda hanya dapat melihat 100%terakhir, dan Anda tidak dapat melihat nilai kemajuan yang terperinci yang diunggah; Jelajahi lagi ...
Selanjutnya, mari kita ubah ide, cobalah, simpan nilai kemajuan ke session , dan tambahkan permintaan tambahan untuk polling nilai kemajuan. Oh, itu tidak buruk! Untuk memastikan bahwa nilai kemajuan yang Anda minta adalah nilai kemajuan yang Anda unggah kali ini daripada nilai kemajuan unggahan lainnya, Anda perlu menyetujui nilai token dalam permintaan yang diunggah dan dalam permintaan tambahan; Sekarang pertanyaan lain adalah bagaimana cara mendapatkan token ini saat meminta. Karena badan permintaan unggahan file ada dalam Request Payload , req.body tidak bisa mendapatkan nilai yang dibawa olehnya, dan saya tidak ingin menguraikan tumpukan ini, tentu saja saya juga tidak bisa menguraikannya; Yang terbaik adalah memasukkannya ke dalam url , masalahnya adalah kadang -kadang Anda harus menyegarkan dua kali untuk menyegarkan token , yang tidak bagus! Sebagai upaya terakhir, saya akan memasukkannya ke dalam cookie !
var cookies = function () {var cks = req.headers.cookie.split (';'), obj = {}; untuk (var i = 0; i <cks.length; i ++) {obj [cks [i] .split ('=') [0] .replace (// s+/ig, '')] = unescape (cks [i] .split ('=') [1]); } kembalikan obj; } (); var querytoken = cookies .__ token__; Formulir .on ('progres', function (bytesReceived, bytesexpected) {var n = parseInt (parsefloat (form.bytesReceived/form.bytesexpected) .tofixed (2)*100); if (req.sesion ['file'+querytoken]) {rEQ.SESSION {ifEy {'query {' oBEy '{ife {ife' req.Session ['file'+queryToken] = {token: queryToken, persen: n}};Untuk IE789, saya datang ke tempat pemungutan suara untuk nilai kemajuan. Saya memaafkan saya, tetapi hati saya sakit;
var getData = function () {$ .post ('/unggah', {getFileInfo: 1, unggahToken: utils.cookie.getCookie ('__ token__')}) .then (function (data) {console.log (data); if (data. Call (Pros.percent); } getData (); Metode call adalah untuk menampilkan nilai kemajuan pada halaman; Sayangnya, Anda hanya dapat melihat 100%terakhir, dan Anda tidak dapat melihat nilai kemajuan yang terperinci yang diunggah; Jelajahi lagi ...
Oke, saya jatuh ke dalamnya lagi; Tapi saya masih merasa ada sesuatu yang salah, tidak ada masalah dengan pemungutan suara Ajax. Masalahnya adalah bahwa session harus menunggu sampai unggahan selesai sebelum memiliki nilai, jadi saya hanya bisa melihat 100%, dan saya tidak dapat melihat nilai kemajuan yang terperinci; dapatkah saya berpikir bahwa dalam proses, res.write sebelumnya dan req.session ini ditangguhkan, tetapi menghemat hasil setiap eksekusi sampai progress dilepaskan, jadi saya hanya bisa melihat 100%; Saya tidak ingin membaca kode sumber yang formidable , tentu saja saya tidak bisa memahaminya, jadi saya pikir pertama kali!
Karena pemungutan suara ajax baik -baik saja, tidak mudah untuk menyimpannya ke session . Jika itu benar -benar tidak berhasil, cobalah dalam global . Itu tidak akan dapat memasukkan nilai ke dalam objek global dan itu akan menggantungnya. Jika itu membuat sedikit perubahan, itu akan dimasukkan ke dalam global :
Form .on ('progress', function (bytesReceived, bytesexpected) {var n = parseInt (parseFloat (form.bytesReceived/form.bytesexpected) .tofixed (2)*100); if ('file'+queryToken]) {Global 'file'+100). Global ['file'+queryToken] = {token: queryToken, persen: n}};Lanjutkan jajak pendapat.
Cantik, itu saja! Apa yang saya lihat di Chrome sama dengan kemajuan HTML5, tetapi akan terasa sedikit terjebak di IE789, tetapi Anda masih dapat melihat nilai kemajuan yang terperinci; Lagi pula, browser lama tidak baik, Anda tahu; Dan, setiap kali Anda mengunggah, Anda memasukkan nilainya ke dalam global , jadi Anda harus membersihkannya dengan tepat. Setelah file diunggah, Anda dapat mentransfernya ke direktori global['file'+queryToken]=null ;
Namun, pemungutan suara berarti banyak permintaan satu demi satu, dan mungkin ada masalah di sini; Jika Anda tidak membatasi, nilai kemajuan diminta setiap interval 500ms; Nah, bilah kemajuan IE789 terpecahkan seperti ini, dan disepakati untuk membuang flash; Meskipun pemungutan suara ini kompatibel dengan semua browser, masih ada banyak permintaan. Mari kita buat penilaian, lanjutkan html5 di luar IE789!
Sebenarnya, jika Anda mengukurnya, mana yang lebih layak, ditambah satu flash unggahan atau permintaan tambahan? Maafkan saya karena tidak memahami Flash, saya tidak akan banyak bicara. Bagaimanapun, saya tidak ingin menambahkan file tambahan ke halaman;
Meringkaskan
Masih ada banyak detail tentang komponen unggahan file. Awalnya saya ingin membuat file JS, tetapi kemudian saya pikir agar lebih dapat digunakan kembali, akan lebih baik melakukannya sebagai halaman independen. Jika Anda perlu mengunggahnya, hanya iframe, yang pasti jauh lebih baik daripada membuat file JS. Di atas adalah seluruh konten artikel ini. Saya harap ini dapat membantu Anda dalam belajar atau bekerja. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.