如何使用 Node JS 获取已排序的文件路径列表

Question

主要目标：转换图像，然后按特定顺序制作转换图像的视频（使用 videoshow）。

问题：图片无序。

预期：有一个文件路径列表，就像我在 finder 中看到的那样，按文件名排序。

现实：我得到一个未排序的文件路径列表。由于我使用videoshow 生成视频，这对我来说是一个严重的问题，因为添加的图像是无序的。

尝试：

我正在使用异步代码，我认为这可能是问题所在，尽管我目前使用的是fs.readdirSync()...

我尝试过使用glob 模块，但也没有用。 我曾尝试在与文件名读取相关的所有内容之前放置一个await 关键字，但它也没有奏效。

---

代码

    const state = require("./state.js");
    const fs = require("fs");

    const originalDir = "./content/images/";
    const resizedDir = "./content/images/resized/";

    async function robot() {
      const content = state.load();

      await acquireImages();
      console.log(content.images)

      async function acquireImages() {
            originalFiles = fs.readdirSync(originalDir);
            imagesList = [];
            resizedImagesList = [];
            originalFiles.forEach(file => {
                if (file.slice(-3) == "png") {
                    imagesList.push({
                        filePath: originalDir + file,
                        fileName: file.slice(0, -8)
                    });
                }
            });

            await imagesList.forEach(image => convertImage(image));

            await populateImageList();
        }

      async function populateImageList() {
            resizedFilenames = await fs.readdirSync(resizedDir);
            resizedImagesList = [];
            for (const file of resizedFilenames) {
                if (file.slice(-3) == "png") {
                    resizedImagesList.push(resizedDir + file);
                }
            }
            content.images = resizedImagesList;
        }
    }

    module.exports = robot;

---

预期输出：

就像在 Finder 中一样。

电流输出：

[ '10_123.5-126.6(2)(converted).png',
  '11_123.5-126.6(3)(converted).png',
  '12_139.6-139.8(1)(converted).png',
  '13_139.6-139.8(2)(converted).png',
  '14_139.6-139.8(3)(converted).png',
  '15_166.1-170.6(1)(converted).png',
  '16_166.1-170.6(2)(converted).png',
  '17_166.1-170.6(3)(converted).png',
  '18_188.8-189.4(1)(converted).png',
  '19_188.8-189.4(2)(converted).png',
  '1_113.3-113.7(1)(converted).png',
  '20_188.8-189.4(3)(converted).png',
  '21_6.6-7(1)(converted).png',
  '22_6.6-7(2)(converted).png',
  '23_6.6-7(3)(converted).png',
  '24_68.5-68.6(1)(converted).png',
  '25_68.5-68.6(2)(converted).png',
  '26_68.5-68.6(3)(converted).png',
  '27_77.1-77.4(1)(converted).png',
  '28_77.1-77.4(2)(converted).png',
  '29_77.1-77.4(3)(converted).png',
  '2_113.3-113.7(3)(converted).png',
  '30_81.7-81.9(1)(converted).png',
  '31_81.7-81.9(2)(converted).png',
  '32_81.7-81.9(3)(converted).png',
  '33_87.3-87.4(1)(converted).png',
  '34_87.3-87.4(2)(converted).png',
  '35_87.3-87.4(3)(converted).png',
  '36_96.3-96.9(1)(converted).png',
  '37_96.3-96.9(2)(converted).png',
  '38_96.3-96.9(3)(converted).png',
  '39_undefined-undefined(1)(converted).png',
  '3_116.7-118.6(1)(converted).png',
  '40_undefined-undefined(2)(converted).png',
  '41_undefined-undefined(3)(converted).png',
  '4_116.7-118.6(2)(converted).png',
  '5_116.7-118.6(3)(converted).png',
  '6_121.6-122.3(1)(converted).png',
  '7_121.6-122.3(2)(converted).png',
  '8_121.6-122.3(3)(converted).png',
  '9_123.5-126.6(1)(converted).png' ]

Answer 1

您需要对fs.readdirSync 返回的数组进行排序。 普通排序不会削减它，您需要natural-sort 的形式来获得您想要的排序。

如果你有一个支持Intl 的节点构建，你可以使用这样的东西：

let arr = ["10_123.5-126.6(2)(converted).png","11_123.5-126.6(3)(converted).png","12_139.6-139.8(1)(converted).png","13_139.6-139.8(2)(converted).png","14_139.6-139.8(3)(converted).png","15_166.1-170.6(1)(converted).png","16_166.1-170.6(2)(converted).png","17_166.1-170.6(3)(converted).png","18_188.8-189.4(1)(converted).png","19_188.8-189.4(2)(converted).png","1_113.3-113.7(1)(converted).png","20_188.8-189.4(3)(converted).png","21_6.6-7(1)(converted).png","22_6.6-7(2)(converted).png","23_6.6-7(3)(converted).png","24_68.5-68.6(1)(converted).png","25_68.5-68.6(2)(converted).png","26_68.5-68.6(3)(converted).png","27_77.1-77.4(1)(converted).png","28_77.1-77.4(2)(converted).png","29_77.1-77.4(3)(converted).png","2_113.3-113.7(3)(converted).png","30_81.7-81.9(1)(converted).png","31_81.7-81.9(2)(converted).png","32_81.7-81.9(3)(converted).png","33_87.3-87.4(1)(converted).png","34_87.3-87.4(2)(converted).png","35_87.3-87.4(3)(converted).png","36_96.3-96.9(1)(converted).png","37_96.3-96.9(2)(converted).png","38_96.3-96.9(3)(converted).png","39_undefined-undefined(1)(converted).png","3_116.7-118.6(1)(converted).png","40_undefined-undefined(2)(converted).png","41_undefined-undefined(3)(converted).png","4_116.7-118.6(2)(converted).png","5_116.7-118.6(3)(converted).png","6_121.6-122.3(1)(converted).png","7_121.6-122.3(2)(converted).png","8_121.6-122.3(3)(converted).png","9_123.5-126.6(1)(converted).png"];

let collator = new Intl.Collator(undefined, {
  numeric: true,
  sensitivity: 'base'
});
arr.sort(collator.compare);

console.log(arr);

或者，您也可以使用 natural-sort 库，例如javascript-natural-sort:

let arr = ["10_123.5-126.6(2)(converted).png","11_123.5-126.6(3)(converted).png","12_139.6-139.8(1)(converted).png","13_139.6-139.8(2)(converted).png","14_139.6-139.8(3)(converted).png","15_166.1-170.6(1)(converted).png","16_166.1-170.6(2)(converted).png","17_166.1-170.6(3)(converted).png","18_188.8-189.4(1)(converted).png","19_188.8-189.4(2)(converted).png","1_113.3-113.7(1)(converted).png","20_188.8-189.4(3)(converted).png","21_6.6-7(1)(converted).png","22_6.6-7(2)(converted).png","23_6.6-7(3)(converted).png","24_68.5-68.6(1)(converted).png","25_68.5-68.6(2)(converted).png","26_68.5-68.6(3)(converted).png","27_77.1-77.4(1)(converted).png","28_77.1-77.4(2)(converted).png","29_77.1-77.4(3)(converted).png","2_113.3-113.7(3)(converted).png","30_81.7-81.9(1)(converted).png","31_81.7-81.9(2)(converted).png","32_81.7-81.9(3)(converted).png","33_87.3-87.4(1)(converted).png","34_87.3-87.4(2)(converted).png","35_87.3-87.4(3)(converted).png","36_96.3-96.9(1)(converted).png","37_96.3-96.9(2)(converted).png","38_96.3-96.9(3)(converted).png","39_undefined-undefined(1)(converted).png","3_116.7-118.6(1)(converted).png","40_undefined-undefined(2)(converted).png","41_undefined-undefined(3)(converted).png","4_116.7-118.6(2)(converted).png","5_116.7-118.6(3)(converted).png","6_121.6-122.3(1)(converted).png","7_121.6-122.3(2)(converted).png","8_121.6-122.3(3)(converted).png","9_123.5-126.6(1)(converted).png"];


arr.sort(naturalSort);
console.log(arr);

<!-- ignore this -->
<script>module = {};</script>
<script src="https://unpkg.com/javascript-natural-sort@0.7.1/naturalSort.js"></script>
<script>naturalSort = module.exports;</script>

在您的代码示例中，它可以像这样集成：

async function acquireImages() {
  let originalFiles = fs.readdirSync(originalDir);
  let collator = new Intl.Collator(undefined, {
    numeric: true,
    sensitivity: 'base'
  });
  originalFiles.sort(collator.compare);
  // ...
}