Arrays 在NodeJS中尝试使用Jimp（Express）从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);

};

在我的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

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

---

你能告诉我怎么做吗？我没有主意了。非常感谢

您可以尝试使用新ES6的阵列分解功能为图像分配变量

从文件开始：

destructuring assignment语法是一个JavaScript表达式，它可以将数组中的值或对象中的属性解压缩到不同的变量中

故此

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); 

---

您可以尝试使用新ES6的阵列分解为图像分配变量

从文件开始：

destructuring assignment语法是一个JavaScript表达式，它可以将数组中的值或对象中的属性解压缩到不同的变量中

故此

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); 

---

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

现在，我可以得到彼此分离的图像：I.ibb.co/n8TbdhM/image.png

因此，当我循环使用帕格时，我得到了想要的三个图像，但总是相同的图像：I.ibb.co/BTDPWN5/image.png

正如你在上面的截图中所看到的，我通过帕格循环浏览了三张不同的图片

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

所以我的代码一定出了什么问题，但我无法找出原因。在console.log（imgDetails.buffer）中时，我得到三个不同的缓冲区，但并不总是相同的。所以我不知道问题来自哪里：

console.log（imgDetails.buffer）：

这是我的代码：

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();

};

exports.images=async（请求、恢复、下一步）=>{
//获取所有图像的详细信息
const imgArray=req.files；
//获取扩展名（pgn、jpeg…）
常量imgFormat=[]；
for（设i=0；i

---

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

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

现在，我可以得到彼此分离的图像：I.ibb.co/n8TbdhM/image.png

因此，当我循环使用帕格时，我得到了想要的三个图像，但总是相同的图像：I.ibb.co/BTDPWN5/image.png

正如你在上面的截图中所看到的，我通过帕格循环浏览了三张不同的图片

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

所以我的代码一定出了什么问题，但我无法找出原因。在console.log（imgDetails.buffer）中时，我得到三个不同的缓冲区，但并不总是相同的。所以我不知道问题来自哪里：

console.log（imgDetails.buffer）：

这是我的代码：

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();

};

exports.images=async（请求、恢复、下一步）=>{
//获取所有图像的详细信息
const imgArray=req.files；
//获取扩展名（pgn、jpeg…）
常量imgFormat=[]；
for（设i=0；i

---

如果需要，我可以提供关于代码其余部分的详细信息。感谢所有感兴趣的人，以下是我解决上述所有问题的最终代码：

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();

};

exports.images=async（请求、恢复、下一步）=>{
const imgArray=req.files；