如何用form Data实现前端上传文件
时间: 2024-05-03 12:20:09 浏览: 13
要实现前端上传文件可以使用表单(form)和 FormData 对象。具体步骤如下:
1. 创建一个表单元素
```html
<form enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
```
2. 监听表单的 submit 事件,使用 FormData 对象将文件数据发送到后端
```javascript
const formElement = document.querySelector('form');
formElement.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(formElement);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
});
```
3. 在后端接收 FormData 对象,处理文件上传逻辑
```javascript
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
const file = req.file;
// 处理文件上传逻辑
});
```