从 Axios 获取图像并作为表单数据发送到 Cloud Function 中的 Wordpress API

Question

我想要完成的是使用 Firebase 云函数 (Node.js) 来：

首先使用axios.get()请求[=]从url（f.eg。从unsplash.com）下载图像

其次拍摄该图像并使用Wordpress Rest API

将其上传到Wordpress网站

问题（对我来说）似乎是 formData 实际上没有附加任何数据，但 axios.get() 请求实际上确实检索了缓冲图像。也许是我对 Node.js 库 form-data 做的有问题，或者我得到的图像编码有误？这是我最好的（但未成功）尝试：

async function uploadMediaToWordpress() {
  var FormData = require("form-data");

    var formData = new FormData();
    var response = await axios.get(
      "https://images.unsplash.com/photo-1610303785445-41db41838e3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
      { responseType: "arraybuffer" }
    );
    formData.append("file", response.data);

    try {
      var uploadedMedia = await axios.post("https://wordpresssite.com/wp-json/wp/v2/media",
        formData, {
          headers: {
            "Content-Disposition": 'form-data; filename="example.jpeg"',
            "Content-Type": "image/jpeg",
            Authorization: "Bearer <jwt_token>",
          },
      });
    } catch (error) {
      console.log(error);
      throw new functions.https.HttpsError("failed-precondition", "WP media upload failed");
    }
    return uploadedMedia.data;
}

我之前在浏览器中使用Javascript成功将图像上传到Wordpress，如下所示：

async function uploadMediaToWordpress() { let formData = new FormData(); const response = await fetch("https://images.unsplash.com/photo-1610303785445-41db41838e3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"); const blob = await response.blob(); const file = new File([blob], "image.jpeg", { type: blob.type }); formData.append("file", file); var uploadedMedia = await axios.post("https://wordpresssite.com/wp-json/wp/v2/media", formData, { headers: { "Content-Disposition": 'form-data; filename="example.jpeg"', "Content-Type": "image/jpeg", Authorization: "Bearer <jwt_token>", }, }); return uploadedMedia.data; },

在过去的几天里，我一直在努力让它发挥作用，但我这辈子似乎都做不好。任何指向正确方向的指针将不胜感激！

Answer 1

“常规”JavaScript 代码（在浏览器中使用）有效，因为图像是作为文件发送的（请参阅代码中的 new File），但是 Node.js代码并没有真正做到这一点，例如Content-Type 值错误，应该是 multipart/form-data; boundary=----.....。尽管如此，我建议您不要像 axios documentation and form-data documentation.

中那样使用流，而不是尝试（努力）使用 arraybuffer 响应。

所以在你的情况下，你想要：

设置stream为responseType:

axios.get(
    'https://images.unsplash.com/photo-1610303785445-41db41838e3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
    { responseType: 'stream' }
)

在文件上传请求的 headers 中使用 formData.getHeaders()（到 /wp/v2/media 端点）：

axios.post( 'https://wordpresssite.com/wp-json/wp/v2/media', formData, {
    headers: {
        ...formData.getHeaders(),
        Authorization: 'Bearer ...'
    },
} )

并且由于来自Unsplash.com的远程图像不使用静态名称（例如image-name.jpg），因此您需要在调用时设置名称formData.append():
```
formData.append( 'file', response.data, 'your-custom-image-name.jpeg' );
```

希望对我有所帮助（对 Node.js 版本 14.15.4 使用 node 命令，这是撰写本文时的最新版本）。

从 Axios 获取图像并作为表单数据发送到 Cloud Function 中的 Wordpress API

Get image from Axios and send as Form Data to Wordpress API in a Cloud Function

wordpress

multipartform-data

node.js

google-cloud-functions

axios