使用库方法的代码流。输出不符合预期

Question

[我想要实现的目标]：上传一组图片，然后是return图片名称，以及调整大小的图片名称

我有一个代码可以调整超大图片的大小。为什么我的代码会按预期生成输出？按照那个顺序。

在我下面的输出是：

before
after
resize_image_outputpath

但我想要它:

before
resize_image_outputpath
after

app.post('/upload', upload.array('file'), (req, res) => {
var imagelist = [];

(req.files).forEach(function (file) {
    if (file.mimetype == 'image/jpeg' || file.mimetype == 'image/png') {
        imagelist.push([file.originalname, __basefolder  + file.originalname]);
        var sizeOf = require('image-size');
        
        console.log("before");
        sizeOf(__basefolder + file.originalname, async function (err, dimensions) {
            if (dimensions.width > 128 && dimensions.height > 128) {
                const resize_2 = await resizeImage1(__basefolder, file.originalname, dimensions, 2);
                imagelist.push([resize_2, 2+"___"+file.originalname]);
            }
        });
        console.log("after");
    }
});
res.json(imagelist);
const file = req.file;

});

//resize images. reduce image size as per divisor value.
async function resizeImage1(folder, fileName, dimensions, divisor) {
    console.log("resize_image_outputpath ");
};

Answer 1

回答问题：

Why is my code in producing output

您正在遍历请求中的文件。当你这样做时，你首先调用：

console.log('before')

然后你打电话给sizeOf()。它安排您传递的回调稍后在其他堆栈上执行。

然后你打电话：

console.log("after")

然后执行您安排的回调，然后您点击 resizeImage1() 调用：

console.log("resize_image_outputpath ");

这就是为什么你的输出是：

before
after
resize_image_outputpath

我不确定你为什么期望 console.log("after") 在 console.log('before') 之前执行，因为代码是自上而下执行的，异步计划回调除外。

编辑

您可以尝试类似的方法：

app.post('/upload', upload.array('file'), (req, res) => {
var imagelist = [];

(req.files).forEach(async function (file) {
    if (file.mimetype == 'image/jpeg' || file.mimetype == 'image/png') {
        imagelist.push([file.originalname, __basefolder  + file.originalname]);
        var sizeOf = require('image-size');

        console.log("before");
        await new Promise(resolve => {
          sizeOf(__basefolder + file.originalname, function (err, dimensions) {
              if (dimensions.width > 128 && dimensions.height > 128) {
                  const resize_2 = resizeImage1(__basefolder, file.originalname, dimensions, 2);
                  
                  imagelist.push([resize_2, 2+"___"+file.originalname]);
              }
              resolve()
          });
        });
        console.log("after");
    }
});
res.json(imagelist);
const file = req.file;

这将按照您期望的顺序生成日志。

使用库方法的代码流。输出不符合预期

Code flow with library method. Output not as expected

javascript

node.js

mern