在Node.js中，您可以使用Express框架搭建一个简单的服务器，并结合multer中间件来处理文件上传。以下是实现文件上传的后端代码示例：
const express = require('express');
const multer = require('multer');
const app = express();
// 设置静态文件目录
app.use(express.static('public'));
// 配置上传文件的存储位置和字段名
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/') // 确保这个文件夹已经存在
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })
// 处理文件上传的路由
app.post('/upload', upload.single('image'), (req, res) => {
const file = req.file;
if (!file) {
return res.status(400).send('No file uploaded.');
}
res.send('File uploaded successfully: ' + file.originalname);
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});前端的AJAX代码可以使用jQuery的$.ajax方法：
$('#upload-form').submit(function (e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert(data);
},
error: function () {
alert('Error uploading file.');
}
});
});确保在HTML中有一个表单来上传文件，例如：
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" />
<button type="submit">Upload</button>
</form>请确保您已经安装了express和multer包，并且您的服务器端口没有被占用。
npm install express multer启动服务器后，当您提交表单时，图片将通过AJAX上传到服务器，无需刷新页面。