尝试在 NodeJS 中使用 Jimp (Express) 从 Multer 上传多张图片时出现问题

Question

我想使用 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);

};

我使用猫鼬访问我的数据库。在 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' ]

在我的 memoryStorage 中，当我需要将它们分开时，我保存了一个由三个图像组成的字符串：

我得到的是：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.jpeg

让图像彼此分开而不是在一个数组中使我的代码工作，我已经测试过了。

你能告诉我怎么做吗？我运行出主意了。非常感谢

Answer 1

您可以尝试使用新的 ES6 的数组解构为图像分配变量

来自文档：

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

所以喜欢

let [imageOne, imageTwo, imageThree] = req.body.photo;

然后你就可以随意使用图片了如果你 console.log() imageOne 你会得到

console.log(imageOne) //output cdb88df7-149d-4506-9ec2-7550c32ace66.jpeg

在你的代码中你可以像这样实现它

 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)}`)
}  

  setTimeout(() => {
   let [imageOne, imageTwo, imageThree] = req.body.photo;
 }, 450);


 setTimeout(() => {
    next();
  }, 600);

};

如果您尝试执行此操作而不是 forloop 以稍后确定实际问题是什么，我认为这可能是循环

let [firstFile,secondFile,thirdFile] = req.files
 const photo1 = await jimp.read(firstFile.buffer);
 const photo2 = await jimp.read(secondFile.buffer);
 const photo3 = await jimp.read(thirdFile.buffer);

 await photo1.resize(600, jimp.AUTO);
 await photo2.resize(600, jimp.AUTO);
 await photo3.resize(600, jimp.AUTO);

await photo1.write(`./public/uploads/${(firstFile)}`);
await photo2.write(`./public/uploads/${(secondFile)}`);
await photo3.write(`./public/uploads/${(thirdFile)}`);

Answer 2

感谢@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();

};

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

Answer 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[i])}`)

    }
    next();

};

使用这段代码，我可以通过 multer 和 jimp 上传多张图片。非常感谢@的帮助

尝试在 NodeJS 中使用 Jimp (Express) 从 Multer 上传多张图片时出现问题

Issues when trying to upload multiple images from Multer using Jimp (Express) in NodeJS

arrays

upload

image

node.js

multer