How to implement file upload in nodejs+express-JS Tutorial-php.cn

How to implement file upload in nodejs+express

亚连

Release： 2018-06-15 11:22:17

Original

1527 people have browsed it

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

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

Copy after login

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

(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: Multiple files The principle of uploading 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

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

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!