Nodejs如何获取上传图片的宽高

Nodejs如何获取上传图片的宽高

我用req.files 里面打印出来只有size 没有宽高 如何得到图片的宽高 或者用其它的方法上传图片能得到宽高
感激不尽

5 回复

Node.js 如何获取上传图片的宽高

当你使用 Node.js 处理文件上传时，通常会使用 multer 或 busboy 等中间件来处理文件。然而，这些中间件默认不会提供图片的宽度和高度信息。为了获取图片的宽度和高度，你需要先将图片读取到内存或磁盘，然后使用图像处理库（如 sharp 或 image-size）来解析图片的尺寸。

以下是一个使用 multer 和 sharp 获取上传图片宽度和高度的示例：

  1. 安装必要的依赖：

    npm install multer sharp

  2. 设置 Multer 并处理文件上传：

    const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();

// 设置 Multer 存储策略
const storage = multer.memoryStorage(); // 将文件存储在内存中
const upload = multer({ storage: storage });

// 文件上传路由
app.post('/upload', upload.single('image'), async (req, res) => {
    try {
        // 获取上传的文件
        const file = req.file;
        
        if (!file) {
            return res.status(400).send('No file uploaded.');
        }
        
        // 使用 sharp 获取图片的宽度和高度
        const metadata = await sharp(file.buffer)
            .metadata();
        
        const width = metadata.width;
        const height = metadata.height;
        
        res.send(`Image width: ${width}, height: ${height}`);
    } catch (error) {
        console.error(error);
        res.status(500).send('Error processing image.');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  • Multer 配置：我们配置 Multer 将上传的文件存储在内存中（memoryStorage()），这样我们可以直接访问文件的二进制数据。
  • 文件上传路由：我们定义了一个 POST 路由 /upload 来处理文件上传。upload.single('image') 表示期望一个名为 image 的单个文件。
  • Sharp 库：一旦文件被上传并存储在内存中，我们可以使用 sharp 库来解析文件的元数据。sharp(file.buffer) 将文件的二进制数据传递给 sharp，然后调用 .metadata() 方法来获取图片的宽度和高度。

通过这种方式，你可以轻松地在 Node.js 中获取上传图片的宽度和高度。


图片的宽高 express 默认是不知道的，通过外部库来做吧

如果没用canvas, gm 什么的图片处理库，而只是想获取图片尺寸，可以用image-size这个小库。。

还有另外一种方式，在前端页面上传时候，直接获取到图片尺寸，随请求传到后端来。。

只能通过外部库来实现吗？ 无法在上传图片之前获取到么？

要在Node.js中获取上传图片的宽度和高度，可以使用sharp库。sharp是一个高性能的图像处理库，能够方便地获取和修改图像的元数据。

首先，你需要安装sharp库：

npm install sharp

然后，你可以使用以下代码来获取上传图片的宽度和高度：

const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('image'), async (req, res) => {
    try {
        const imagePath = req.file.path;
        const metadata = await sharp(imagePath).metadata();
        console.log(`Width: ${metadata.width}, Height: ${metadata.height}`);
        res.send(`Image uploaded successfully! Width: ${metadata.width}, Height: ${metadata.height}`);
    } catch (error) {
        console.error(error);
        res.status(500).send('Error processing image.');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 引入必要的模块：

    • express用于创建服务器。
    • multer用于处理文件上传。
    • sharp用于处理图像元数据。

  2. 设置Multer：

    • 使用multer配置一个存储策略，指定文件保存路径。

  3. 定义上传路由：

    • 使用upload.single('image')中间件处理单个文件上传。
    • 获取上传文件的路径。
    • 使用sharp读取文件并获取元数据（包括宽度和高度）。
    • 打印或返回宽度和高度。

  4. 错误处理：

    • 捕获并处理可能发生的错误，确保服务器正常运行。

通过这种方式，你可以轻松地从上传的图片中获取其宽度和高度，并进行进一步处理。

回到顶部