Detailed explanation of using nodejs+express to implement simple file upload function-JS Tutorial-php.cn

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

小云云

Release： 2017-12-27 14:03:25

Original

2490 people have browsed it

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

Copy after login

2. Download multer middleware

npm i multer or yarn multer

Copy after login

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(&#39;multer&#39;);
const fs = require(&#39;fs&#39;);
const UPLOAD_PATH = &#39;./uploads&#39;

Copy after login

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>

Copy after login

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

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

Copy after login

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

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

Copy after login

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(&#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 })
 });
})

Copy after login

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!