Express+multer implements the specific steps to upload node images

This time I will bring you the specific steps for express multer to implement node image uploading. What are the precautions for express multer to implement node image uploading? The following is a practical case. Let’s take a look. .

The following will introduce how to use express multer to implement the image upload function in node. The specific content is as follows:

In the front end, we use ajax to asynchronously upload images, use file-input to upload images, use formdata objects to process image data, and post to the server

Use multermiddleware in node to process the upload routing interface

multer documentation

package.jsonhtml section

<p>
    <label>File input:</label>
    <input>
    </p><p></p>
    <img  src="/static/imghwm/default1.png" data-src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" class="lazy" alt="Express+multer implements the specific steps to upload node images" >
  
  <button>提交</button>
  

js part

<script></script>
  <script>
    //上传图片的业务逻辑函数
    function uploadFile(){
      //上传图片的input
      var file = document.getElementById("file")
      //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
      //创建formdata对象
      var formData = new FormData();
      //给formdata对象中放入数据(键值对的方式)
      formData.append(&#39;file&#39;,file.files[0]);
      //提交请求
      $.ajax({
        url: &#39;/upload&#39;,//请求路径
        type: &#39;POST&#39;,
        data: formData,
        contentType: false,//为了让浏览器根据传入的formdata来判断contentType
        processData: false,//同上
        success: function(data){
          if(200 === data.code) {
            $(&#39;#result&#39;).html("上传成功！");
            $(&#39;#img&#39;).attr(&#39;src&#39;,data.data);
          } else {
            $(&#39;#result&#39;).html("上传失败！");
          }
          console.log(2)
        },
        error: function(){
          $("#result").html("与服务器通信发生错误");
        }
      });
      console.log(1)
    }
    //给按钮添加点击事件
    function postPage() {
        //上传按钮
        var uploada = document.getElementById(&#39;upload&#39;);
        uploada.addEventListener("click",function () {
          uploadFile();
        },false);
    }
    window.onload = function () {
      postPage();
    }
</script>

NodeJS logic code

const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(dirname, 'public')));
app.get('/',(req,res)=>{
  res.sendFile(dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    cb(null, './public/uploadImgs')
  },
![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)
  //确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
  filename: function (req, file, cb){
    cb(null, Date.now()+file.originalname)
  }
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
  //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
  //线上的也就是服务器中的图片的绝对地址
  var url = '/uploadImgs/' + req.file.filename
  res.json({
    code : 200,
    data : url
  })
});
http.createServer(app).listen(3000,()=>{
  console.log('server is listening')
})

I feel good about myself, but I don’t know why the blog park wants to remove the homepage for me....

再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of cookie usage in Django

How to replace url parameters with regular JS

The above is the detailed content of Express+multer implements the specific steps to upload node images. For more information, please follow other related articles on the PHP Chinese website!