前端传file格式数据后端接收案例
时间: 2023-12-09 21:05:56 浏览: 29
好的,这里给出一个前端传输文件数据并在后端接收的案例,以 JavaScript 和 Express 框架为例:
前端代码
```javascript
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (event) => {
const formData = new FormData();
formData.append('file', event.target.files[0]);
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
console.log(result);
});
```
上述代码中,我们使用了 HTML5 中的 `input[type="file"]` 元素来实现文件选择功能。在文件选择后,我们将文件数据封装成 FormData 对象,并通过 Fetch API 发送到后端。请求的目标 URL 为 `/upload`,请求方法为 POST。
后端代码
```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) => {
console.log(req.file);
res.json({ message: 'File uploaded successfully' });
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
上述代码中,我们使用了 Express 框架和 multer 库来处理文件上传。在 Express 应用中,我们定义了一个 POST 方法的路由 `/upload`,并使用 multer 的 `upload.single('file')` 中间件来接收单个文件数据。在中间件处理后,我们可以在 `req.file` 对象中获取到文件的相关信息,如文件名、文件类型、文件大小等。最后,我们将处理结果封装成 JSON 数据并返回给前端。