Nodejs express上传图片如何获取图片尺寸

Nodejs express上传图片如何获取图片尺寸

如题

6 回复

Nodejs express上传图片如何获取图片尺寸

在使用Node.js和Express处理文件上传时，经常需要获取上传图片的尺寸（例如宽度和高度）。本文将介绍如何通过一个简单的示例来实现这一功能。

环境配置

首先，确保你已经安装了必要的依赖库。这里我们使用express来搭建服务器，并使用multer来处理文件上传。此外，还需要安装sharp库来获取图片尺寸信息。

npm install express multer sharp

示例代码

接下来，我们将创建一个简单的Express应用，用于接收上传的图片并获取其尺寸信息。

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(`Image Width: ${metadata.width}`);
        console.log(`Image Height: ${metadata.height}`);

        res.send({
            status: 'success',
            message: 'Image uploaded successfully',
            dimensions: {
                width: metadata.width,
                height: metadata.height
            }
        });
    } catch (error) {
        console.error(error);
        res.status(500).send({ status: 'error', message: 'Failed to process image' });
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

解释

  1. Multer 配置:

    • multer({ dest: 'uploads/' })：设置Multer将上传的文件存储到uploads/目录中。
    • upload.single('image')：定义了一个单文件上传的中间件，其中image是表单字段的名称。

  2. Sharp 库:

    • sharp(imagePath)：加载指定路径的图片。
    • .metadata()：异步方法，返回图片的元数据，包括宽度和高度等信息。

  3. 响应处理:

    • 如果成功获取图片尺寸信息，则返回包含图片尺寸的对象。
    • 如果发生错误，则返回错误信息。

总结

通过上述代码，我们可以轻松地在Node.js和Express应用中上传图片并获取其尺寸信息。这种方式不仅简单易用，而且功能强大，能够满足大多数场景下的需求。


这个 我用的gm 这个库 可以获取图片很多属性 同时可以很好的处理图片 你可以试试

在前端就可以获取尺寸的

看文档 http://expressjs.com/api.html#req.files

额，前端怎么获取啊，用HTML5API吗？

Node.js Express 上传图片并获取图片尺寸

在 Node.js 中使用 Express 框架处理文件上传时，我们经常需要获取上传图片的尺寸。为了实现这一点，我们可以使用 multer 进行文件上传，并利用 image-size 库来获取图片尺寸。

示例代码

  1. 安装依赖

首先，你需要安装 express, multer 和 image-size 库：

npm install express multer image-size
  1. 设置服务器

创建一个基本的 Express 服务器，并配置 multer 来处理文件上传：

const express = require('express');
const multer = require('multer');
const sizeOf = require('image-size');

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

app.post('/upload', upload.single('image'), (req, res) => {
    const filePath = req.file.path;
    
    // 获取图片尺寸
    sizeOf(filePath, (err, result) => {
        if (err) {
            return res.status(500).send('Error getting image dimensions');
        }
        
        res.send({
            filename: req.file.originalname,
            size: {
                width: result.width,
                height: result.height
            }
        });
    });
});

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

解释

  1. 引入必要的库

    • express: 用于创建 Web 服务器。
    • multer: 用于处理表单数据中的文件上传。
    • image-size: 用于获取图像的尺寸信息。

  2. 设置 Multer

    • multer({ dest: 'uploads/' }) 配置 Multer 将上传的文件存储在 uploads/ 目录下。

  3. 处理上传请求

    • upload.single('image') 中的 'image' 是表单字段名，与 HTML 表单中的 <input type="file" name="image"> 对应。
    • req.file 包含上传文件的信息，如路径 (path) 和原始文件名 (originalname)。

  4. 获取图片尺寸

    • 使用 image-size 的 sizeOf 方法获取图片的宽度和高度。
    • 在回调函数中，将结果发送回客户端。

通过这种方式，你可以轻松地在 Express 应用程序中上传图片并获取其尺寸。

回到顶部