Detailed explanation of uploading and using Express multer-JS Tutorial-php.cn

Detailed explanation of uploading and using Express multer

小云云

Release： 2018-01-20 10:30:38

Original

1762 people have browsed it

This article mainly introduces the use of multer upload in the Express series. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

I have been reading "The Definitive Guide to NodeJS" for the past two days. I have read this book for a long time, but I have never read it carefully. I just read it carefully this time.

I gained a lot, mainly in the details of using wenpack. It was a bit of an epiphany experience. In addition, I am no longer confused on node. But to be honest, it is quite difficult to do something directly using node at the current level. Today I tested the link to mongodb and mysql database. Although it can be used, it is still weird. So I want to use the existing framework first, and then learn node backwards.

For the framework, I chose express.

The main thing is to test the middleware mentioned in several books. It was written a little early, and many APIs are outdated. Just follow the official website. Look for an updated place.

What I currently find useful is: multer and static.

The latter can debug the page locally, which is especially useful for mobile pages.

This time I will mainly talk about multer. I have not implemented all the functions. I only implemented the function of uploading a single image, and I will explore the others.

This is the entire directory of files, there are two main ones, one is main.js in the root directory, and the other is public/index.html.

Place the code:

//main.js
let express = require(&#39;express&#39;);

var multer = require(&#39;multer&#39;)

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
 })
 
var upload = multer({ storage: storage })

//var upload = multer({ dest: &#39;public/&#39; })
 

let app = express()

app.use(express.static(&#39;public&#39;))

app.post(&#39;/public/index.html&#39;,upload.single(&#39;myfile&#39;),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})

app.listen(3300,&#39;127.0.0.1&#39;)

Copy after login

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file" accept="image/*">
  <p id="result"></p>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById(&#39;file&#39;);
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append(&#39;myfile&#39;, file)
      xhr.open(&#39;post&#39;, &#39;/public/index.html&#39;)
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById(&#39;result&#39;).innerHTML = this.response
          document.getElementById(&#39;img&#39;).src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>

</html>

Copy after login

I don’t want to reference the jquery library, so I wrote ajax natively. It shouldn't be difficult. In short, after clicking the button to select the image, the image information will be placed in an object with the key name myfile and passed to the background.

express stores the received pictures in the /public/ file. There is a small pitfall here. You can see that I commented this line of code in main.js:

var upload = multer({ dest: &#39;public/&#39; })

Copy after login

In fact, I used this line of code at the beginning,dest means to choose a path to store the file, but there is a small problem with writing it this way. The saved file does not have a suffix.

When I return data to the front desk

res.send(req.file)

Copy after login

This problem is very serious. For example, in one scenario, I upload a picture as an avatar, but when I wait Next time I enter my personal page, the data returned to me by the background cannot be used as the address of the image, which is very troublesome. So I found a reason on the Internet and replaced the above code comment with this:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
})

var upload = multer({ storage: storage })

Copy after login

destination is the address where the file is stored, filename is set to the name of the file, so if it is written like this:

filename: function (req, file, cb) {
 cb(null, file.fieldname + &#39;.png&#39;);
}

Copy after login

you will find that the name of each picture you pass in is It is myfile.png, the new one overwrites the old one. So in order to save all the pictures passed in, I use Date.now() as a different identifier for each picture, so that there will be no overwriting.

That’s it for now, I’ll update it next time I upload more pictures.

Related recommendations:

Detailed explanation of Ajax and node.js multer to implement file upload function

multer definition and Usage summary

Nodejs advanced: file upload example based on express+multer

The above is the detailed content of Detailed explanation of uploading and using Express multer. For more information, please follow other related articles on the PHP Chinese website!