arrays - 尝试在 NodeJS 中使用 Jimp (Express) 从 Multer 上传多个图像时出现问题

标签 arrays node.js image upload multer

我想使用 Multer (nodejs) 在我的网站上显示多个图像。

我创建了以下函数:

exports.upload = multer(options).array('photo',3);

exports.images = async (req, res, next) => {
    const imgArray = req.files;

    const imgFormat = [];
    for(let i = 0; i < imgArray.length; i++ ) {
        imgFormat.push(imgArray[i].mimetype.split('/')[1] );
    }

    req.body.photo = [];
    for(let i = 0; i < imgArray.length; i++ ) {
        req.body.photo.push(`${uuid.v4()}.${imgFormat[i]}`);
    }

    for (let i = 0; i < imgArray.length; i++) {
        const imgDetails = imgArray[i];
        const photo = await jimp.read(imgDetails.buffer);
        await photo.resize(1200, jimp.AUTO);
        await photo.write(`./public/uploads/${(req.body.photo)}`)
    }
    next();
    console.log(req.body.photo);

};

我使用 Mongoose 来访问我的数据库。在 MongoDB 上,我设法检索图像而没有遇到任何问题:

see what I get in MongoDB

但是当我console.log req.body.photo时,我得到以下数组:

 [ 'cdb88df7-149d-4506-9ec2-7550c32ace66.jpeg',
   'efd9113b-9bd1-410e-a402-e969bf7aa8e3.png',
   '6408dbdc-4093-44a9-91f1-e34e7c5918e1.jpeg' ]

在我的内存存储中,当我需要将三个图像分开时,我保存了一个由三个图像组成的字符串:

我得到的:cdb88df7-149d-4506-9ec2-7550c32ace66.jpeg,efd9113b-9bd1-410e-a402-e969bf7aa8e3.png,6408dbdc-4093-44a9-91f1-e34e7c5918e1.j Hook

我想要什么:
cdb88df7-149d-4506-9ec2-7550c32ace66.jpeg
efd9113b-9bd1-410e-a402-e969bf7aa8e3.png
6408dbdc-4093-44a9-91f1-e34e7c5918e1.jpeg

将图像彼此分开而不是放在数组中使我的代码可以工作,我已经测试过它。

您能告诉我该怎么做吗?我没有主意了。非常感谢

最佳答案

感谢@chuklore的回答,除了让我学习新的ES6实践之外,你还帮助我解决了我的问题。但在执行您的建议后,我仍然面临问题。

现在,我可以将图像彼此分开:i.ibb.co/n8TbdhM/image.png

因此,当我使用 PUG 循环时,我得到了想要的三个图像,但它始终是相同的图像:i.ibb.co/BTDPWN5/image.png

正如您在上面的屏幕截图中看到的,我通过 PUG 循环浏览本应是三个不同图像的图像。

当我检查内存中的这些图像时,它确实是具有不同 UUID 的相同图像。

所以我的代码一定出了问题,但我无法弄清楚。当在 console.log(imgDetails.buffer) 中时,我得到三个不同的缓冲区,并不总是相同的。所以我不知道问题出在哪里:

console.log(imgDetails.buffer) : https://i.ibb.co/XVFzz4x/image.png

这是我的代码:

exports.images = async (req, res, next) => {
    // get all images details
    const imgArray = req.files;
    // get extension (pgn, jpeg...)
    const imgFormat = [];
    for(let i = 0; i < imgArray.length; i++ ) {
        imgFormat.push(imgArray[i].mimetype.split('/')[1] );
    }
    // get unique ID by image
    req.body.photo = [];
    for(let i = 0; i < imgArray.length; i++ ) {
        req.body.photo.push(`${uuid.v4()}.${imgFormat[i]}`);
    }
    // unpack images from the array
    let [imageOne, imageTwo, imageThree] = req.body.photo;

    for (let i = 0; i < imgArray.length; i++) {
        const imgDetails = imgArray[i];
        // get buffer for each image
        const photo = await jimp.read(imgDetails.buffer);
        await photo.resize(600, jimp.AUTO);
        await photo.write(`./public/uploads/${(imageOne)}`);
        await photo.write(`./public/uploads/${(imageTwo)}`);
        await photo.write(`./public/uploads/${(imageThree)}`)
    }
    next();

};

如果需要,我可以提供有关其余代码的详细信息。谢谢

关于arrays - 尝试在 NodeJS 中使用 Jimp (Express) 从 Multer 上传多个图像时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58344471/

相关文章:

java - 命名 Java boolean 数组中的 boolean 元素

javascript - 向 JS 'parseFloat' sum 添加过滤器

node.js - Node.js 是一个单进程服务器吗?

javascript - 从AWS SDK描述地址检索IP

HTML5 Canvas ,调整背景图像的大小

javascript - 无法通过 PHP 函数将 JSON 剩余响应获取到数组中

c - d引用二维数组

C 数组 : setting element at offset

python - 如何使用 PIL 保存 JPEG 元数据?

ios - 当你点击一个单元格时,placeholderImage 被传输,当我返回后,向上并点击照片正在更改的同一个单元格