从Axios获取图像，并将其作为表单数据发送到云函数中的Wordpress API

Question

我试图实现的是使用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;
},

在过去的几天里，我一直在努力让它发挥作用，但就我的一生而言，似乎无法做到这一点。任何指向正确方向的指针都将不胜感激！

Answer 1

；常规的"；JavaScript代码(在浏览器中使用(之所以有效，是因为图像是作为文件发送的(请参阅代码中的new File(，但Node.js代码并没有真正做到这一点，例如Content-Type值错误，应该是multipart/form-data; boundary=----.....。尽管如此，我建议您像在axios文档和表单数据文档中一样使用流，而不是(努力(使用arraybuffer响应。

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

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. 在文件上传请求的headers中使用formData.getHeaders()(到/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' );
   

我希望这会有所帮助，这对我来说很好(使用Node.js版本14.15.4的node命令，这是撰写本文时的最新版本(。