Node.js + Express 处理图片上传的三种方法

在现代 Web 开发中，图片上传是一个必不可少的功能。Node.js 作为一种高效的服务器端 JavaScript 运行环境，加上 Express 这个流行的 Web 框架，可以很方便地实现图片上传的功能。本文将介绍三种常用的图片上传方法，并提供示例代码，帮助读者快速掌握这一技能。

方法一：使用 Node.js 的原生模块

Node.js 的原生模块 fs（File System）可以用来读写文件。我们可以通过监听 req 对象的 data 和 end 事件，将上传的图片数据保存到服务器的本地文件系统中。这种方法的优点是简单易懂，不需要安装额外的依赖库，缺点是无法处理上传的大文件，也不能对上传的图片进行压缩等处理。

以下是使用 Node.js 原生模块实现图片上传的代码：

// www.javascriptcn.com code example
const fs = require('fs');
const http = require('http');

http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/upload') {
    const chunks = [];
    req.on('data', chunk => {
      chunks.push(chunk);
    });
    req.on('end', () => {
      const buffer = Buffer.concat(chunks);
      fs.writeFileSync('uploaded-image.png', buffer);
      res.end('Image uploaded successfully');
    });
  } else {
    res.statusCode = 404;
    res.end('Not found');
  }
}).listen(3000);

方法二：使用 multer 中间件

multer 是一个流行的 Node.js 中间件，可以处理上传的文件数据，并将其保存到本地文件系统中。multer 可以设置上传文件的大小限制、文件名、保存路径等参数，还可以自动压缩上传的图片。使用 multer 需要安装 multer 模块。

以下是使用 multer 实现图片上传的代码：

// www.javascriptcn.com code example
const express = require('express');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, new Date().toISOString() + file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
  res.send('Image uploaded successfully');
});

app.listen(3000);

方法三：使用 cloudinary 模块

cloudinary 是一个云端图片管理服务，提供了丰富的图片处理功能，包括图片上传、压缩、裁剪、格式转换等。使用 cloudinary 可以避免本地文件系统的繁琐管理，也可以大大提高图片处理的效率。使用 cloudinary 需要注册账号并获取 API Key 和 API Secret。

以下是使用 cloudinary 实现图片上传的代码：

// www.javascriptcn.com code example
const express = require('express');
const cloudinary = require('cloudinary').v2;

const app = express();

cloudinary.config({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  api_secret: 'your_api_secret'
});

app.post('/upload', (req, res) => {
  const fileStr = req.body.data;
  cloudinary.uploader.upload(fileStr, (err, result) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.send('Image uploaded successfully');
    }
  });
});

app.listen(3000);

总结

本文介绍了三种常用的图片上传方法，分别是使用 Node.js 的原生模块、使用 multer 中间件、使用 cloudinary 模块。每种方法都有其优缺点，读者可以根据实际需求选择合适的方法。无论使用哪种方法，都需要注意上传文件的大小限制、文件名的安全性、保存路径的合法性等问题，以确保图片上传的安全和稳定。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651118fd95b1f8cacd976e49