How to implement file upload in nodejs+express

This article mainly introduces the use of nodejs express to complete simple file upload functions. Friends who need it can refer to it

1. Create an express project

express -e nodejs-uploadfile

2. Download multer middleware

npm i multer or yarn multer

3. Reference multer in routes/index.js. Since file operations are also used, you must also reference the fs module and specify the file. Upload directory

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

Single file upload: The files in index.html are as follows (the type of the form file must be enctype="multipart/form-data"),

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

in routes/ Add the upload route to index.js to handle the operation of uploading files

router.post('/upload', upload.single('fileUpload'), 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: '上传成功'
  });
 });
 })
})

If the uploaded file is an image, you can also use the FileReader object to preview the image

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

Multiple file upload: Multiple files The principle of uploading is the same as that of single file upload. The code is as follows:

router.post('/upload', upload.array('fileUpload'), 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('成功');
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: '上传成功',
 })
 }).catch(err => {
 res.json({ err })
 });
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to determine whether a variable name exists in an array in JavaScript

How to implement the delayed hiding function through JS

How to implement the timer function using Angular

How to implement the triangular arrow labeling function using Angular

The above is the detailed content of How to implement file upload in nodejs+express. For more information, please follow other related articles on the PHP Chinese website!