开始前先说一个原则
想手动操作form表单事件 尽量阻止表单里submit的默认提交事件 否则会出难以理解的问题 还没找出原因 如知道请解答 谢谢大佬
想看重点可以直接跳到最后~~~~
后端代码
const fs = require('fs')
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({dest:'uploads/'})
app.get('/form',async(req,res) => {
const form =await fs.readFileSync('./form.html',{encoding:'utf8'});
res.send(form);
})
app.post('/uploads',upload.single('file'),async (req,res) => {
// console.log("上传成功")
const file = req.file;
console.log(file)
res.send(file)
})
app.listen(3000,() => {
console.log('http://localhost:3000');
})页面html
这是以submit按钮提交的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传图片</title>
</head>
<body>
<h1>文件上传</h1>
<form id="form">
<!-- 这里的multiple属性是允许多文件上传的，单文件上传可以不写此属性（最好都写上）-->
<input id="files" type="file" name="file" />
<input id="btn" type="submit" value="上传" /></form>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn = document.getElementById('btn');
const form = document.getElementById('form');
btn.addEventListener('click', async () => {
//阻止表单的默认提交时间 这行代码如果不写 那么将会导致原表单还是用submit的默认提交事件 且默认提交事件以get为请求方式 把文件名拼接到url后面 导致后台虽然可以接收到文件上传，但是不能正确返回数据 也就是说
event.preventDefault();
const formData = new FormData(form);
console.log(formData)
const res = await axios.post('http://localhost:3000/uploads', formData)
console.log(res)
})
</script>
</body>
</html>//阻止表单的默认提交时间 event.preventDefault();这行代码如果不写 那么将会导致原表单还是用submit的默认提交事件 且默认提交事件以get为请求方式 把文件名拼接到url后面 导致后台虽然可以接收到文件上传，但是不能正确返回数据 猜测是sunbmit阻止完整的axios提交表单~具体还是等大神来解答吧。。。 注意看下图 ? 后面已经拼接了文件的名字了
以button按钮提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传图片</title>
</head>
<body>
<h1>文件上传</h1>
<form id="form">
<!-- 这里的multiple属性是允许多文件上传的，单文件上传可以不写此属性（最好都写上）-->
<input id="files" type="file" name="file" />
<input id="btn" type="button" value="上传" onclick=""/></form>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//对应type=button提交
const btn = document.getElementById('btn');
const form = document.getElementById('form');
btn.onclick = async function() {
const formData = new FormData(form);
const res = await axios.post('http://localhost:3000/uploads', formData)
console.log(res.data)
}
</script>
</body>
</html>建议以后要想手动提交表单 还是把submit按钮改成button吧 不然会出很多难以解决的问题~~~~
简洁版本
submit
<input id="btn" type="submit" value="上传" /></form>
<script>
const btn = document.getElementById('btn');
const form = document.getElementById('form');
btn.addEventListener('click', async () => {
//阻止表单的默认提交时间 这行代码如果不写 那么将会导致原表单还是用submit的默认提交事件 且默认提交事件以get为请求方式 把文件名拼接到url后面 导致后台虽然可以接收到文件上传，但是不能正确返回数据 也就是说
event.preventDefault();
const formData = new FormData(form);
console.log(formData)
const res = await axios.post('http://localhost:3000/uploads', formData)
console.log(res)
})
</script>button
<input id="btn" type="button" value="上传" onclick=""/></form>
<script>
//对应type=button提交
const btn = document.getElementById('btn');
const form = document.getElementById('form');
btn.onclick = async function() {
const formData = new FormData(form);
const res = await axios.post('http://localhost:3000/uploads', formData)
console.log(res.data)
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。