如何上传/存储“大”图像url（从canvas.toDataUrl()生成）到node js或express js或cloudinary？

Question

我正在使用 React js 做一个小项目，我的服务器正在运行带有 mongodb 数据库的express和node js。

对于较小的网址，我可以正常与服务器通信。但是当我上传更大的网址（从 canvas.todataurl() 生成）时，我无法将数据发送到服务器。它抛出 413 负载太大错误。 我的目的是从画布生成图像 url，并将该图像 url 发送到 cloudinary 或 mongodb 数据库，以便将来如果需要我可以从那里获取它。我已经添加了设置限制的 bodyparse，但错误仍然存在。

我使用了一个事件处理程序按钮，单击它后，图像文件会同时下载，图像 url 存储在 mongodb 数据库或 cloudinary 中。我的 url 是从 canvas(canvas.todataurl()) 生成的，该 url 太大，并且由于此负载太大或 413 错误仍然存在。

downhandler，其中从画布生成 url 并上传到 cloudinary：-

常量handleDownload = () => {

if (canvasRef) {
  
  const imageData = localStorage.getItem("certificate-image");

  if (imageData) {
   
    const link = document.createElement("a");
    link.href = imageData;
    link.download = "certificate.png";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    //Original fetch if new not work

  fetch(`http://localhost:1200/update/${id}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body:imageData,
  })
    .then((res) => res.json())
    .then((res) => {
      console.log("resbase updated successfully:", res);
    })
    .catch((error) => {
      console.error("Error updating database:", error);
    });

  //Original fetch if new not work

  
  } else {
    console.error("No image data found in localStorage.");
  }
}

};

Answer 1

将文件上传到Cloudinary时，请求正文的最大大小可以是100MB。任何大于此值的请求都会收到您所看到的 413 错误。要上传大于 100MB 的文件，需要分块发送。

您可以使用Cloudinary SDK，请检查以确保您使用的是

upload_large

方法而不是常规上传方法进行上传。 upload_large 方法应该用于所有大于 100MB 的文件，因为它会自动分割文件并分部分上传。

下面我还提供了一个在 JS 中实现的分块上传示例 JSFiddle，您可以使用 - https://jsfiddle.net/leptians/hLajmbpf/