使用 Axios 将 Puppeteer 截图上传到 Cloudinary答案

【问题标题】：Upload Puppeteer screenshot to Cloudinary with Axios使用 Axios 将 Puppeteer 截图上传到 Cloudinary
【发布时间】：2021-05-06 05:44:57
【问题描述】：

我正在尝试使用 Puppeteer 截取屏幕截图，然后使用 Axios 将其上传到 Cloudinary。我不确定我是否能够上传 Puppeteer 二进制文件，是否应该将其设置为 base64，将其引用为缓冲区等。无论我尝试什么，它似乎都会默默地失败。

沿着这条线尝试：

const puppeteer = require('puppeteer');
const axios = require('axios');

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://www.google.com');

const screenshot = await page.screenshot({
    encoding: 'binary'
});

await browser.close();

let data = {
    file: screenshot, upload_preset: 'abc123'
}

axios.post('https://api.cloudinary.com/v1_1/def456/image/upload', data);

用这个静态的 1x1 像素图像替换 data 效果很好，所以我猜图像格式存在问题，或者可能需要将东西包装在 Promise 中？在所有这些都运行之后，我还可以在我正在尝试的服务中正常看到屏幕截图。

let data = {
    file: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/TQBcNTh/AAAAAXRSTlPM0jRW/QAAAApJREFUeJxjYgAAAAYAAzY3fKgAAAAASUVORK5CYII=", upload_preset: 'abc123'
}

【问题讨论】：

您从 Cloudinary 返回的上传 API 调用的响应是什么，您可以记录一下吗？另外，您可以尝试将编码设置为 base64，获取该编码并以 data:image/png;base64,<base64_string> 为前缀并将其作为 file 参数值发送？
是的；这行得通。谢谢！ :)

标签： axios upload puppeteer cloudinary

【解决方案1】：

这行得通：

const puppeteer = require('puppeteer');
const axios = require('axios');

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://www.google.com');

let screenshot = await page.screenshot({
    encoding: 'base64'
});

await browser.close();

screenshot = 'data:image/png;base64,' + screenshot;

let data = {
    file: screenshot, upload_preset: 'abc123'
}

axios.post('https://api.cloudinary.com/v1_1/def456/image/upload', data).then((response) => {
        console.log('worked', response);
    }, (error) => {
        console.log('did not work', error);
    });

【讨论】：