上传pdf文件的前后端代码
时间: 2023-08-08 21:10:51 浏览: 52
以下是一个基本的上传PDF文件的前后端代码示例:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>上传PDF文件</title>
</head>
<body>
<h1>上传PDF文件</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="pdfFile" id="pdfFile">
<button type="submit">上传</button>
</form>
<script>
const form = document.getElementById('uploadForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const fileInput = document.getElementById('pdfFile');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('pdfFile', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('文件上传成功:', data);
})
.catch(error => {
console.error('文件上传失败:', error);
});
});
</script>
</body>
</html>
```
后端代码(使用Node.js和Express框架):
```javascript
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('pdfFile'), (req, res) => {
if (!req.file) {
res.status(400).json({ error: '未选择文件' });
} else {
// 在这里可以对上传的文件进行处理
res.json({ message: '文件上传成功' });
}
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});
```
请注意,以上代码只是一个基本示例,实际情况中你可能需要进行更多的验证和处理。前端代码使用了HTML和JavaScript来创建一个简单的上传表单,并通过Fetch API将文件发送到后端。后端代码使用了Node.js和Express框架来接收文件并进行处理。在实际应用中,你可能需要根据你的需求进行适当的修改和扩展。