使用multer上传文件，默认不会给文件添加扩展名
一、package.json
{
"name": "file_upload",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"axios": "^0.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"multer": "^1.4.2",
"randomstring": "^1.1.5",
"vue": "^2.6.10"
}
}
二、app.js
var express = require('express')
var multer = require('multer')
var randomstring = require('randomstring')
var path = require('path')
var app = express()
app.use(require('cors')())
app.use(express.json())
// 指定上传文件的存储目录及文件名
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
var ext = path.extname(file.originalname)
cb(null, randomstring.generate(44) + ext)
}
})
var upload = multer({storage: storage})
app.post('/upload', upload.single('file'), (req, res) => {
var file = req.file
console.log(file)
if (file) {
file.url = `http://localhost:3000/${file.filename}`
res.send(file)
} else {
res.send({
msg: '老铁，别皮了，请上传文件吧'
})
}
})
// 静态资源访问
app.use(express.static('uploads'))
app.use(express.static('public'))
app.listen(3000, () => {
console.log('http://localhost:3000')
})
三、upload_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="upload" action="">
<p>
<input @change="fn" ref="file" type="file">
</p>
<p>
<input type="submit">
</p>
</form>
</div>
<script>
var http = axios.create({
baseURL: 'http://localhost:3000'
})
Vue.config.productionTip = false
Vue.prototype.$http = http
new Vue({
el: '#app',
methods: {
fn(){
console.log(this.$refs.file.files)
},
upload() {
var formData = new FormData()
formData.append('file', this.$refs.file.files[0])
this.$http.post('/upload', formData, {
headers: {
'content-type': 'multipart/form-data'
}
}).then((res) => {
console.log(res.data)
}).catch((err) => {
console.log(err)
})
}
}
})
</script>
</body>
</html>
网友评论