时间戳

首页 > 解决方案 > 从 Axios 获取图像并作为表单数据发送到云函数中的 Wordpress API

node.js - 从 Axios 获取图像并作为表单数据发送到云函数中的 Wordpress API

问题描述

我想要完成的是使用Firebase Cloud Function (Node.js)来：

首先axios.get()使用请求从 url（例如来自 unsplash.com）下载图像

其次，使用Wordpress Rest API获取该图像并将其上传到Wordpress站点

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

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;
  },

在过去的几天里，我已经尝试过让它发挥作用，但我一生似乎无法做到这一点。任何指向正确方向的指针将不胜感激！

标签： node.jswordpressaxiosgoogle-cloud-functionsmultipartform-data

解决方案

“常规” JavaScript 代码（在浏览器中使用）之所以有效，是因为图像是作为文件发送的（请参阅new File代码Content-Type中multipart/form-data; boundary=----.....的 尽管如此，我建议您不要尝试（努力）arraybuffer响应，而是像在axios 文档和form-data 文档中一样使用流。

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

  1. 设置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' }
)

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

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

  3. 并且由于来自 Unsplash.com 的远程图像不使用静态名称（例如image-name.jpg），因此您需要在调用时设置名称formData.append()：

    formData.append( 'file', response.data, 'your-custom-image-name.jpeg' );

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

推荐阅读