安裝multer
npm install multer -D
server端
const express = require('express')
const multer = require('multer')
const app = express()
const port = 3000
const path = require('path')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
// 這裡是在server端要放圖檔的目錄
cb(null, './static/img')
},
filename: function (req, file, cb) {
// 這裡是對檔案重命名
cb(null, file.originalname)
}
})
var upload = multer({ storage: storage })
//使用express中間件來實作靜态資源服務
//通過http://10.221.224.135:3000/public/ 可以通路static下的目錄
app.use('/public',express.static(path.join(__dirname,'./static')))
app.get('/', (req, res) => res.send('Hello World!'))
//single中的字段要和前端上傳的formData的字段一緻
app.post('/upload',upload.single('file'),(req,res)=>{
console.log(req.file)
const { path } = req.file
let paths = path.replace('\\','/')
res.send({message:'success',fileurl:paths})
//傳回在server端存放的路徑
})
app.listen(port, () => console.log(`Example app listening on port port!`))
web端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="upload" type="file" ref="upload" accept="image/jpeg,image/jpg,image/png">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
const upload = document.getElementsByClassName('upload')[0]
upload.onchange=(e)=>{
let file = e.target.files[0]
let formdata = new FormData()
formdata.append('file', file)
axios.post('http://10.221.224.135:3000/upload',formdata,{
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}],
}).then((data)=>{
console.log(data)
})
}
</script>
</html>
上傳完成之後可以通過自己的pathname+public/img/xxx.png來通路。
![Vue - vue create、vue ui、vue init三種方式建立Vue項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)