为什么 Puppeteer 不能处理多个上传？答案

【问题标题】：Why doesn't Puppeteer work with multiple uploads?为什么 Puppeteer 不能处理多个上传？
【发布时间】：2018-06-27 01:52:18
【问题描述】：

在我的 HTML 中，我有一个如下的输入元素：

<input id="input-44" name="input44[]" type="file" multiple>

在我的 JavaScript 代码中（跳过一些样板文件），以下工作：

const elementHandle = await page.$("#input-44");
elementHandle.uploadFile("/path/to/file");
await page.click("#upload-button");

根据文档：

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

uploadFiles 应该能够接受多个文件

当我将代码更改为：

const elementHandle = await page.$("#input-44");
const files = ["/path/to/file", "/path/to/file2"];
elementHandle.uploadFile(...files);
await page.click("#upload-button");

上传不再起作用。这是为什么呢？

【问题讨论】：

我已经在我的 Redmine 任务中测试了您的文件上传代码，它确实可以上传文件 (pptr v1.5)。您是否尝试过记录错误，在 headful 模式下运行代码？ - 可能还有其他错误
也许这是您代码中的拼写错误，但鉴于 uploadFile 与所有其他 puppeteer 方法一样返回 Promise，您为什么不在该行代码中使用 await？

标签： javascript node.js chromium puppeteer headless

【解决方案1】：

不确定这是问题所在，但elementHandle.uploadFile(...files); 之前没有await

const elementHandle = await page.$("#input-44");
const files = ["/path/to/file", "/path/to/file2"];
await elementHandle.uploadFile(...files);
await page.click("#upload-button");

如果没有await，不知道为什么代码开始工作。

【讨论】：

【解决方案2】：

对于替代方案，我认为您可以循环上传路径中的每个元素

const elementHandle = await page.$("#input-44");
const files = ["/path/to/file", "/path/to/file2"];
for (let index = 0; index < files.length; index++) {
   const filePath = files[index];
   await elementHandle.uploadFile(filePath);
}
await page.click("#upload-button");

【讨论】：

对于某些网站，它会多次触发上传功能。