TL;DR
Formulir mengirimkan permintaan POST dengan "data/fileUpload".
Server merespons 200 dan merender halaman baru. Selamat.

Cobalah mengunggah file baru di laman yang dirender lagi.
Permintaan POST sekarang menjadi "data/fileUpload/fileUpload".
Server tidak tahu apa yang harus dilakukan. Jahat.

Saya tidak begitu yakin apa yang sedang terjadi, itu sebabnya judulnya sangat kabur. Saya menerapkan fitur sederhana ke aplikasi Node (Express). Inilah yang dilakukan fitur ini:

  • Pengguna mengunggah file.
  • Pengguna mengirimkan file untuk ditinjau.
  • Pengguna menerima tanggapan.

Masalah

Mengunggah file dan mengembalikan fungsi hasil bekerja dengan lancar. Setelah file diunggah dan server merender halaman baru, browser masih berada di url "data/fileUpload". Mencoba mengunggah file kedua mengarahkan permintaan POST ke url "data/fileUpload/fileUpload" berikut yang tidak dapat dirutekan oleh server.

<!DOCTYPE html>
    <!-- Boilerplate ... -->
    <body
    <div id="form">
         <%= message %>
         <% if(processed == "true"){ %>
         <%= results %>
         <% }; %>
         <form method='post' action='data/fileUpload' enctype="multipart/form-data">
            <input type='file' name='fileUploaded' id="browseButton" required>
            <input type='submit' value="Upload" id="uploadButton">
      </div>
     <script>
        var uploadField = document.getElementById("browseButton");
        uploadField.onchange = function() {
            if(this.files[0].size > 2097152){
            alert("File is too big!");
            this.value = "";
            };
        };
</script>
</body>
</html>

Seperti yang Anda lihat, tindakan formulir adalah "data/fileUpload". Permintaan posting ini ditangani oleh router dan pengontrol berikut.

// Defined in app.js
app.use('/data',  dataRouter); 

Router berikut ada di data.js. processController diimpor dari pengontrol processData.js.

router.post('/fileUpload', [processController.fileUpload, processController.process]);

Dan ini adalah Controller untuk fileUpload dan proses.


exports.fileUpload = function(req, res,next) {
   // Upload the file... 
   next(); // calls process function
};

// Process the data. Not implemented
exports.process = function(req, res) {
        res.render('index', {processed:"true", 
            message: "hello", results:"result" });
    });
};

Berikut ini adalah pohon direktori yang tidak lengkap.
app.js
pengontrol
processController.js
package.json
rute
data.js
upload
Uploaded.file
tampilan
index.ejs


Bagaimana saya bisa mengaktifkan server untuk kembali ke halaman awal tetapi juga mengirim hasil?

1
a_a_a 6 Juli 2020, 09:08

1 menjawab

Jawaban Terbaik

Anda harus menggunakan res.redirect() yang dikombinasikan dengan req.flash() - connect flash (that at some point got excluded from expressjs bundle) untuk apa yang Anda sedang mencoba untuk melakukan. (Yang mengirim pesan ok/tidak-ok kembali ke depan).

res.render() Mengirim kembali template html (atau mesin lainnya) kembali ke depan dan merender - Tidak peduli apa yang terjadi selanjutnya dan ini dapat menyebabkan masalah seperti milik Anda (mengirim satu halaman penuh sebagai template dan mengacaukan data) .

res.redirect() mengalihkan pengguna ke rute lain (dengan ini memulai ulang permintaan seperti: GET /some_new_or_even_the_same_route.

req.flash() Dapat menangani pesan yang dikembalikan.

Juga, dengan redirect() Anda dapat mengirim kode status sebagai argumen pertama yang dapat bertindak sebagai processed true/false Anda

Saya pikir res.render() bukan fungsi yang tepat untuk digunakan dalam skenario Anda.

1
fedesc 6 Juli 2020, 07:53