node上傳圖片接口 & 前端實現

 上傳圖片：multer模塊

 https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

 

 

 

 以上基本功能就實現。

 

細節處理👇

const express=require('express')
const router= express.Router()
const multer= require('multer')
var storage = multer.diskStorage({
    destination: function(req, file, cb) {
    // 指定文件路徑
        cb(null, './static/img')
    },
    filename: function(req, file, cb) {
    // 指定文件名


        //文件名重復覆蓋
        // 后綴名發生改變,如何解決？👇
    console.log('----',file)
    let exts=file.originalname.split('.') //拿到源文件的后綴名
    let ext=exts[exts.length-1]
    
    let tmpname=(new Date()).getTime()+parseInt(Math.random()*9999)  //為了避免重復，用時間戳表示
        cb(null, `${tmpname}.${ext}`);
    }
});
var upload = multer({
    storage: storage
});

//上傳圖片必須用post方法
router.post('/upload',upload.single('hehe'),(req,res)=>{////hehe就是上傳圖片數據的key值，前端必須保持統一。可以用postman模擬，數據類型是表單對象。
  console.log(req.file)
  let {size,mimetype,path}=req.file
  let types=['jpg','jpeg','png','gif'] //允許上傳的數據類型
  let tmpType=mimetype.split('/')[1]
  if(size>500000){
      return  res.send({err:-1,msg:'尺寸過大'})
  }else if(types.indexOf(tmpType)==-1){
      return  res.send({err:-2,msg:'媒體類型錯誤'})
  }else{
    let url=`/public/img/${req.file.filename}`
    res.send({err:0,msg:'ok',img:url})
  }
  
 
})

module.exports=router
 

 

 

---

 

前端部分如何 上傳圖片

 

 

---

 

 

 方式二, 代碼部分👇

 

 

---

 

 

 

 

 

總結：

前端部分，以jq示例，

先獲取圖片，再轉成formData對象，把圖片添加到對象里（注意：這里只能通過append添加）

把formData對象傳到$.ajax參數中即可。