Detailed explanation of using nodejs+express to implement simple file upload function

This article mainly introduces the simple file upload function using nodejs+express. Friends who need it can refer to it. I hope it can help everyone.

1. Create 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 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>

Add the upload route in routes/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, also You can use the FileReader object to implement image preview

(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: The principle of multi-file upload 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 })
 });
})

Related codes are at github.com/bWhirring/n…

Related recommendations:

Detailed explanation of Ajax and node.js multer implementation files Upload function

Examples to explain thinkjs file upload function

jQuery implements preview function before uploading image files

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