尝试将图像上传到 ImgBB 时出错

Question

我正在尝试使用 NodeJS 和 GraphQL 将图像上传到ImgBB 。 我有一个uploadImage突变，它以数据 url 字符串的形式获取图像，如下所示：

import parseDataUrl from "data-uri-to-buffer";

// ...

{
  Mutation: {
    async uploadImage(_, { dataUrl }) {
      const buffer = parseDataUrl(dataUrl); // https://www.npmjs.com/package/data-uri-to-buffer
      
      if (buffer.byteLength > 10 * 10 ** 6)
        throw new Error("The image exceeds the maximum size of 10 MB");

      const body = new FormData();
      body.append("image", buffer);

      const result = await fetch(
        `https://api.imgbb.com/1/upload?key=${process.env.IMGBB_KEY}`,
        {
          method: "post",
          headers: { ...body.getHeaders() },
          body
        }
      ).then<any>(result => result.json());

      if (!result.success || !result.url) {
        const msg = result.error?.message;
        throw new Error(
          `There was an error during upload${msg ? `: ${msg}` : ""}`
        );
      }
      return result.url;
    }
  }
}

body.getHeaders()包含：

{
    'content-type': 'multipart/form-data; boundary=--------------
------------656587403243047934588601'
  }

（我正在使用node-fetch ）

但无论我使用查询参数、标题和正文的组合，我总是最终得到这个错误：

  {
    status_code: 400,
    error: { message: 'Undefined array key "scheme"', code: 0 },
    status_txt: 'Bad Request'
  }

我找不到任何关于它的东西，你有什么想法吗？

Answer 1

您可以采取多种措施来解决您的问题。

1. FormData 的重要一点是，如果尚未包含图像缓冲区，则需要显式提供图像缓冲区的名称，没有名称 API 的上传会引发您提到的相同错误。

 body.append("image", buffer, "addSomeImageName.png");

2. 该api不需要任何明确的标头，因此您可以将其删除。

 { method: "post", headers: { ...body.getHeaders() }, // This can be removed. body }

3. 您用于检查结果的逻辑是错误的，即使结果成功也总是会抛出错误。

 if (!result.success || !result.url) { // Check for success flag only. const msg = result.error?.message; throw new Error( `There was an error during upload${msg ? `: ${msg}` : ""}` ); }

这是我测试的块并且工作正常：

 import parseDataUrl from "data-uri-to-buffer"; import fetch from 'node-fetch'; import FormData from "form-data"; async function uploadImage({ dataUrl }) { const buffer = parseDataUrl(dataUrl); if (buffer.byteLength > 10 * 10 ** 6) throw new Error("The image exceeds the maximum size of 10 MB"); const body = new FormData(); body.append("image", buffer, "someImageName.png"); const result = await fetch( `https://api.imgbb.com/1/upload?key=<your-api-key>`, { method: "post", // headers: { ...body.getHeaders() }, body } ).then(result => result.json()) // .then(data => { // console.log(data); // Working fine here too. // }); console.log("-------result--------\n", result); // Result is fine. // Logic testing. console.log(result.success); console.log(result.url); console.log(!result.success); console.log(!result.url); console.log(!result.success || !result.url); if (!result.success || !result.url) { const msg = result.error ? .message; console.log(`There was an error during upload${msg ? `: ${msg}` : ""}`) // throw new Error( // `There was an error during upload${msg ? `: ${msg}` : ""}` // ); } return result.url; } console.log("--------------------- console result ------------------------") console.log(uploadImage({ dataUrl: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" }));

Answer 2

对我来说似乎很奇怪的一件事：

const buffer = parseDataUrl(dataUrl); // https://www.npmjs.com/package/data-uri-to-buffer

注释中的包仅提供您未使用的函数dataUriToBuffer 。 你在使用parseDataUrl的parseDataUrl吗？ 您是否根据文档使用节点获取自己的FormData实现？

请将您的问题附加到所有相关的import语句中，并分享body.getHeaders()的内容。