从Python Requests迁移至JS实现图片上传适配现有PHP服务

Node.js 环境下的内置 FormData 与浏览器端实现存在差异，这会导致 PHP 无法正确解析上传的文件。我们可以借助第三方 form-data 库模拟 Python requests 提交的表单格式，实现无需修改 PHP 代码的上传方案。

步骤1：安装依赖 #

需要安装 Puppeteer、form-data 和 HTTP 请求库（这里以 axios 为例，也可以用 node-fetch）：

npm install puppeteer form-data axios

步骤2：完整实现代码 #

const puppeteer = require('puppeteer');
const FormData = require('form-data');
const axios = require('axios');

(async () => {
    // 1. Puppeteer 页面截图，直接获取 Buffer（无需存本地文件）
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com'); // 替换为你的目标页面
    const screenshotBuffer = await page.screenshot({ type: 'png' });
    await browser.close();

    // 2. 构造与 Python requests 格式一致的 FormData
    const form = new FormData();
    // 参数对应：字段名、文件Buffer、文件名、文件类型
    form.append('screenshot', screenshotBuffer, {
        filename: 'screenshot.png',
        contentType: 'image/png'
    });

    // 3. 发送POST请求，必须携带form生成的请求头
    try {
        const response = await axios.post('http://your-php-service.com/upload.php', form, {
            headers: form.getHeaders()
        });
        console.log('上传成功:', response.data);
    } catch (error) {
        console.error('上传失败:', error.response?.data || error.message);
    }
})();

关键说明 #

• 字段名匹配：确保 form.append 的第一个参数（示例中为 screenshot）与 PHP 接收代码中 $_FILES['screenshot'] 的键名完全一致，这是原 Python 代码与 PHP 约定的字段名。
• 请求头必须正确：form.getHeaders() 会生成符合表单上传规范的请求头（包括 Content-Type 及边界标识），这是 PHP 能解析文件的核心。
• 文件格式对应：如果截图用 JPEG 格式，需将 screenshot 的 type 设为 jpeg，同时调整 contentType 为 image/jpeg、文件名为 screenshot.jpg。

可选：node-fetch 版本实现 #

若偏好使用 node-fetch，代码逻辑完全一致：

const puppeteer = require('puppeteer');
const FormData = require('form-data');
const fetch = require('node-fetch');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    const screenshotBuffer = await page.screenshot({ type: 'png' });
    await browser.close();

    const form = new FormData();
    form.append('screenshot', screenshotBuffer, {
        filename: 'screenshot.png',
        contentType: 'image/png'
    });

    try {
        const response = await fetch('http://your-php-service.com/upload.php', {
            method: 'POST',
            body: form,
            headers: form.getHeaders()
        });
        const data = await response.json();
        console.log('上传成功:', data);
    } catch (error) {
        console.error('上传失败:', error.message);
    }
})();

内容的提问来源于stack exchange，提问作者Ferdi Rahmad Rizaldi