尝试将图像上传到 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）

但无论我使用 headers 和 body 查询参数的组合，我总是最终得到这个错误：

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

我找不到任何相关信息，你有什么想法吗？

Answer 1

有一件事对我来说很奇怪：

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

评论里的包只提供了dataUriToBuffer的功能，你没有用到。您使用的是 jsdom? Are you using node-fetch's own implementation of FormData as supposed to according to the documentation 中的 parseDataUrl 吗？

请在您的问题后附上所有相关 import 陈述，并请分享 body.getHeaders().

的内容

Answer 2

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

关于 FormData 的重要事项，您需要明确提供图像缓冲区的名称（如果尚未包含），不带名称上传 API 会引发与您提到的相同的错误。

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

api 不需要任何 header 明确要求，因此您可以删除它。

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

您用来检查结果的逻辑有问题，即使结果成功也会始终抛出错误。

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"
}));

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

Error when trying to upload an image to ImgBB

upload

file-upload

node.js