ajax +NodeJS 实现图片上传实例

下面是“ajax +NodeJS 实现图片上传实例”的完整攻略。

前提条件

• 前端使用jQuery库
• 后端使用NodeJS和express框架
• 需要安装multer中间件处理文件上传

实现过程

1. 前端页面

在前端页面中，需要准备一个表单，其中包含一个input[type=file]元素，用于选择要上传的图片。此外，还需要添加一个button，用于提交表单数据。

HTML代码示例：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <br><br>
  <button type="submit">上传图片</button>
</form>

2. 前端JavaScript代码

前端JavaScript代码使用jQuery库实现，通过ajax向后端发送数据。

$('#uploadForm').submit(function(e) {
  e.preventDefault(); // 阻止表单默认提交操作
  var formData = new FormData(this); // 获取表单数据
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    cache: false, // 不缓存数据
    contentType: false, // 不设置请求头
    processData: false, // 不处理数据
    success: function(data) {
      console.log('上传成功');
    },
    error: function() {
      console.log('上传失败');
    }
  });
});

3. 后端NodeJS代码

使用express框架编写NodeJS后端代码，实现文件上传功能。

var express = require('express');
var multer = require('multer');
var app = express();

// 设置文件存储路径和文件名
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

// 创建multer中间件
var upload = multer({ storage: storage });

// 处理POST请求
app.post('/upload', upload.single('avatar'), function(req, res, next) {
  if (!req.file) {
    res.status(500).json({ message: '上传失败' });
  } else {
    res.status(200).json({ message: '上传成功' });
  }
});

// 启动服务器
app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

在上述代码中，使用了multer中间件处理文件上传，其中destination属性定义了文件存储路径，filename属性定义了存储的文件名，upload.single('avatar')表示只允许上传一个名为avatar的文件，最后通过JSON格式返回上传结果。

示例说明

为了更好的理解，这里提供两个实例说明：

1. 上传文件后，返回上传成功或上传失败信息

前端代码：

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data) {
    if (data.message === '上传成功') {
      alert('上传成功！');
    } else {
      alert('上传失败！');
    }
  },
  error: function() {
    console.log('上传失败');
  }
});

后端代码：

app.post('/upload', upload.single('avatar'), function(req, res, next) {
  if (!req.file) {
    res.status(500).json({ message: '上传失败' });
  } else {
    res.status(200).json({ message: '上传成功' });
  }
});

1. 上传文件后，返回上传图片的链接地址

前端代码：

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data) {
    if (data.url) {
      $('#preview').attr('src', data.url);
    } else {
      alert('上传失败！');
    }
  },
  error: function() {
    console.log('上传失败');
  }
});

后端代码：

app.post('/upload', upload.single('avatar'), function(req, res, next) {
  if (!req.file) {
    res.status(500).json({ message: '上传失败' });
  } else {
    var url = req.protocol + '://' + req.get('host') + '/' + req.file.path;
    res.status(200).json({ url: url });
  }
});

这里使用req.protocol和req.get获取协议和域名，再通过req.file.path获取上传图片的路径，拼接成完整的图片链接地址，返回给前端。在前端代码中，使用$('#preview').attr('src', data.url);将图片链接设置到一个img元素的src属性中，即可预览上传的图片。

这就是“ajax +NodeJS 实现图片上传实例”的完整攻略，希望能对你有所帮助。