Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion

Ausführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion

小云云
小云云Original
2017-12-27 14:03:252499Durchsuche

In diesem Artikel wird hauptsächlich die einfache Datei-Upload-Funktion mit nodejs+express vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

1. Express-Projekt erstellen


express -e nodejs-uploadfile

2. Multer-Middleware herunterladen


npm i multer or yarn multer

3. Referenzmulter in Routen/index.js. Da auch Dateioperationen verwendet werden, müssen Sie auch auf das fs-Modul verweisen und das Datei-Upload-Verzeichnis angeben


const multer = require('multer');
const fs = require('fs');
const UPLOAD_PATH = './uploads'

Einzelner Datei-Upload: Die Dateien in index.html lauten wie folgt (der Typ der Formulardatei muss enctype="multipart/form-data" sein) ,


<form action="/upload" method="post" enctype="multipart/form-data">
 <input name="fileUpload" type="file" />
 <img src="" alt="">
 <button type="submit">上传</button>
</form>

Fügen Sie die Upload-Route in Routen/index.js hinzu, um den Vorgang des Hochladens von Dateien zu verwalten


router.post(&#39;/upload&#39;, upload.single(&#39;fileUpload&#39;), function (req, res, next) {
 const { file } = req;
 fs.readFile(file.path, function(err, data) {
 fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
  if (err) res.json({ err })
  res.json({
  msg: &#39;上传成功&#39;
  });
 });
 })
})

Wenn es sich bei der hochgeladenen Datei um ein Bild handelt, können Sie auch das FileReader-Objekt verwenden, um eine Vorschau des Bildes anzuzeigen


(function($){
 $(&#39;input&#39;).on(&#39;change&#39;, function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $(&#39;img&#39;).attr(&#39;src&#39;, ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))

Mehrfacher Datei-Upload: Das Prinzip des Multi- Das Prinzip des Datei-Uploads und des Einzeldatei-Uploads ist dasselbe, der Code lautet wie folgt:


router.post(&#39;/upload&#39;, upload.array(&#39;fileUpload&#39;), function (req, res, next) {
 const files = req.files;
 const response = [];
 const result = new Promise((resolve, reject) => {
 files.map((v) => {
  fs.readFile(v.path, function(err, data) {
  fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {
   const result = {
   file: v,
   }
   if (err) reject(err);
   resolve(&#39;成功&#39;);
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: &#39;上传成功&#39;,
 })
 }).catch(err => {
 res.json({ err })
 });
})

Zugehöriger Code finden Sie unter github.com/bWhirring/n…

Verwandte Empfehlungen:

Detaillierte Erklärung von Ajax und node.js Multer zur Implementierung der Datei-Upload-Funktion

Ein Beispiel für eine thinkjs-Datei Upload-Funktion

jQuery zur Implementierung der Bilddatei-Vorschaufunktion vor dem Hochladen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn