使用Puppeteer通过URL填充input[type=file]实现文件上传可行吗？

这种方式不可行 #

uploadFile 方法仅支持传入本地文件的绝对路径，不接受远程存储服务的URL。原因是浏览器的安全限制：文件上传框的设计初衷是让用户主动选择本地文件，不允许脚本直接通过远程URL填充，这会绕过本地文件访问的权限校验。你传入S3这类存储服务的URL，Puppeteer无法识别为有效文件路径，自然无法完成上传。

最佳实现方案 #

核心思路是：先把存储服务上的文件下载到本地临时目录，再用本地文件路径调用uploadFile，上传完成后清理临时文件。具体步骤如下：

1. 下载远程文件到本地临时目录 #

用Node.js的请求库（比如axios）配合文件系统模块，把存储服务的文件下载到临时文件。可以用tmp模块自动管理临时文件，避免手动处理路径和清理。

示例代码：

const axios = require('axios');
const fs = require('fs');
const tmp = require('tmp');

// 下载远程文件到临时文件
async function downloadRemoteFile(url) {
  // 创建临时文件
  const tmpFile = tmp.fileSync();
  
  // 发起请求并写入临时文件
  const response = await axios({
    url: url,
    method: 'GET',
    responseType: 'stream'
  });
  
  await new Promise((resolve, reject) => {
    response.data.pipe(fs.createWriteStream(tmpFile.name))
      .on('finish', resolve)
      .on('error', reject);
  });
  
  return tmpFile;
}

2. 使用本地临时文件完成上传 #

调用上面的方法拿到临时文件路径，再传入uploadFile：

// 假设remoteFileUrl是存储服务的文件URL
const tmpFile = await downloadRemoteFile(remoteFileUrl);

const fileUploadHandle = (await page.$(
  "span#add_files1 > input[type=file]"
)) as ElementHandle<HTMLInputElement>;
await fileUploadHandle.uploadFile(tmpFile.name);

3. 上传完成后清理临时文件 #

上传成功后，销毁临时文件释放空间：

// 上传完成后调用
tmpFile.removeCallback();

注意事项 #

• 确保临时文件目录有读写权限，Puppeteer进程能访问该路径；
• 处理下载过程中的异常（比如网络错误、文件不存在），避免流程中断；
• 如果是大文件，考虑添加下载进度监控，避免长时间无响应；
• 部分网站可能对文件上传做了校验（比如文件哈希、来源），需要确保下载的文件和用户上传的完全一致。

内容的提问来源于stack exchange，提问作者Nihir