nodejs利用ajax实现网页无刷新上传图片

在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上传到服务器，无需刷新页面。