Question

我想知道如何解决以下问题。我有一个上传组件，可以接受多个文件。因此，onDrop会向我提供accepted和rejected个文件（基于扩展名和大小）。

从那些accepted我需要弄清楚它们是否具有正确的尺寸，并且我想使用browser-image-size package。

这个包返回一个promise，但正如你在下面看到的，我需要在提供的accepted参数中检查每个文件。我试过以下但是你可以看到这总是返回一个emty数组并且未定义。

如何解决此问题？

＆＃13;

const checkDimensions = (file) => {
  return Promise.resolve(file);
}

const handleFiles = (accepted, rejected) => {
  const acceptedFiles = [];
  const errors = [];

  accepted.map(file =>
    checkDimensions(file)
    .catch((error) => errors.push(error))
    .then((file) => acceptedFiles.push(file))
  );

  // both log empty array
  console.log(acceptedFiles);
  console.log(errors);
}

// Logs undefined 
console.log(handleFiles(['test file']))

＆＃13;

Answer 1

您的控制台日志会在checkDimensions有机会完成它之前执行。

const handleFiles = (accepted, rejected) => {
  const acceptedFiles = [];
  const errors = [];

  accepted.map(file => checkDimensions(file)
    .then(file => acceptedFiles.push(file), error => errors.push(error))
    .then(() => {
      console.log(acceptedFiles);
      console.log(errors);
    });
  );
}

then有一个可选的第二个参数。使用2个参数的catch后跟then与then之间的差异非常微妙：如果checkDimensions决定拒绝文件，acceptedFiles.push(file)仍会被执行。

承诺Array.map或循环替代？

1 个答案: