express+multer 上傳圖片 並存儲到指定目錄

這種方式存儲會直接保留源文件,不會變成二進制,再取圖片直接用node服務地址即可,如localhost:8080/images/line2.png

 

node代碼

var express = require('express');//引入express框架
var router = express.Router();//路由

const multer = require('multer');//multer插件

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/images/')
    //文件保存路徑
  },
  filename: function (req, file, cb) {
    console.log(file.originalname)
    cb(null, file.originalname)
    //存儲文件名
  }
})
 
var upload = multer({ storage: storage })

router.post('/uploader', upload.single('file'), function (req, res, next) {
  //定義接口
  res.send('ok')
});

前端代碼

var formdata = new FormData();
formdata.append("file", this.$refs.form.uploadFiles[0].raw);
var requestOptions = {
  method: 'POST',
  body: formdata,
  redirect: 'follow'
};
fetch("http://localhost:3000/uploader?file", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

之前試着用axios發送formdata到後臺,但是試了很多方法都上傳不過去,最後用了fetch傳遞一次就通了,下面貼下之前的axios方法,希望有大佬幫指點指點。

axios({
  method: 'post',
  url:'http://localhost:3000/uploader',
  headers: { "Content-Type": "multipart/form-data" },
  data:{
    file:qs.stringify(formData)
  }
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章