版权声明：转载请注明来源 https://blog.csdn.net/weixin_41829196/article/details/88606970
利用formData实现图片上传
客户端
<body>
<input type="file" id="file" style="display: none;">
<button id="btn">upload</button>
</body>
<script>
let btn = document.querySelector('#btn')
let file = document.querySelector('#file')
btn.onclick = function() {
file.click() // 调取系统选择图片的弹框
}
// 监听input的file变化值
file.onchange = function (event) {
let file = event.target.files[0]
upload(file)
}
function upload(file) {
let xhr = new XMLHttpRequest()
xhr.open('post', '/upload', true)
let formData = new FormData()
formData.set('filename', file)
xhr.send(formData)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert('success')
}
}
}
</script>
复制代码服务器
const express = require('express')
const app = express()
const path = require('path')
const multer = require('multer')
const multerObj = multer({ dest: 'uploads/'}) //上传中间件
app.use(multerObj.any())
app.get('/', (req, res, next) => {
res.setHeader('Content-Type', 'text/html')
res.sendFile(path.join(__dirname, 'index.html'))
})
app.post('/upload', (req, res, next) => {
console.log(req.files)
res.send({
'states':'success'
})
})
app.listen(9090, () => {
console.log('server listen 9090')
})