Nodejs express中如何访问用户上传(表单input type="file")至服务端图片的宽度和高度？

Nodejs express中如何访问用户上传(表单input type=“file”)至服务端图片的宽度和高度？

我用的是express，请问下如何在node.js的代码里，访问到用户上传(表单input ttype=“file”)至服务端图片的宽度和高度？ 谢谢~

3 回复

在Node.js的Express框架中处理用户上传的图片，并获取其宽度和高度，通常需要以下几个步骤：

  1. 设置文件上传功能：使用中间件如multer来处理文件上传。
  2. 读取图片信息：使用图像处理库如sharp或image-size来获取图片的宽度和高度。

下面是详细的实现步骤及代码示例：

安装必要的库

首先，确保安装了以下npm包：

npm install express multer sharp

示例代码

设置服务器

创建一个简单的Express应用，并设置文件上传处理：

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

const app = express();

// 配置Multer以存储上传的文件
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname)
    }
});

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

app.post('/upload', upload.single('image'), async (req, res) => {
    try {
        const imagePath = req.file.path;
        
        // 使用Sharp获取图片的尺寸
        const metadata = await sharp(imagePath).metadata();
        const width = metadata.width;
        const height = metadata.height;

        res.send(`图片宽度: ${width}, 图片高度: ${height}`);
    } catch (error) {
        res.status(500).send('处理图片时出错');
    }
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

HTML表单

确保有一个HTML表单允许用户上传图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*">
        <button type="submit">上传</button>
    </form>
</body>
</html>

解释

  1. Multer配置：Multer用于处理文件上传。在这个例子中，我们配置它将上传的文件保存到uploads/目录下，并且文件名包含时间戳以避免冲突。
  2. 文件处理：当用户提交表单后，文件会被保存到服务器。我们通过req.file.path获取文件路径。
  3. Sharp库：sharp是一个高效的图像处理库，可以快速获取图片的元数据，包括宽度和高度。
  4. 返回结果：服务器将图片的宽度和高度发送回客户端。

这样，你就能够从Express服务器上获取用户上传图片的宽度和高度了。


我尝试用req.files去读取，但是里面的数据没有上传图片的高宽

要在Node.js Express应用中获取用户上传图片的宽度和高度，你需要使用中间件来解析表单数据，并且使用一个库（如image-size）来读取图片的尺寸信息。以下是一个简单的实现步骤：

  1. 安装必要的依赖：
npm install express multer image-size
  1. 创建Express应用并设置文件上传处理：
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 imagePath = req.file.path;
    const dimensions = sizeOf(imagePath);
    
    // 获取图片宽度和高度
    const { width, height } = dimensions;

    res.send(`Image width: ${width}, Image height: ${height}`);
});

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

解释

  • Multer 是一个用于处理 multipart/form-data 的中间件，主要用于上传文件。
  • image-size 是一个轻量级库，可以快速地获取图片的尺寸信息。
  • 在路由处理函数中，我们通过 req.file 访问到上传的文件信息，其中 path 属性指向了临时存储的文件路径。
  • 使用 sizeOf 函数读取该文件的尺寸信息。

这段代码将创建一个简单的Express服务器，监听3000端口，并提供一个POST接口 /upload 用于处理文件上传。当文件上传后，它会返回上传图片的宽度和高度。

回到顶部