Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Datei-Upload in nodejs+express

So implementieren Sie den Datei-Upload in nodejs+express

亚连
亚连Original
2018-06-15 11:22:171501Durchsuche

In diesem Artikel wird hauptsächlich die einfache Datei-Upload-Funktion mit nodejs+express vorgestellt.

1. Erstellen Sie ein Express-Projekt

express -e nodejs-uploadfile

2. Multer-Middleware herunterladen

npm i multer or yarn multer

3. Da auch Dateioperationen verwendet werden, muss das fs-Modul referenziert und angegeben werden Upload-Verzeichnis

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

Einzeldatei-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>

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

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))

Mehrere Datei-Uploads: mehr Das Prinzip des Datei-Uploads ist das gleiche wie das des Einzeldatei-Uploads. 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 })
 });
})

Das Obige habe ich für alle zusammengestellt hilfreich für alle in der Zukunft.

Verwandte Artikel:

So ermitteln Sie, ob ein Variablenname in einem Array in JavaScript vorhanden ist

So implementieren Sie die verzögerte Ausblendfunktion durch JS

So verwenden Sie Angular, um die Timer-Funktion zu implementieren

So verwenden Sie Angular, um die dreieckige Pfeilbeschriftungsfunktion zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Datei-Upload in nodejs+express. 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