将 blob url 转换为文件或 Base64 以上传到 cloudinary

Question

我已经通过创建 canvas 将文件转换为 blob url，现在我想将 blob url 转换为文件类型或 base64 类型以上传到 cloudinary。但这对我来说似乎非常具有挑战性，因为 none 他们正在工作。

下面的 代码是将图像转换为 blob url, 实际上我正在裁剪它们

CanvasUtils.js

export async function getCroppedImg(
  imageSrc,
  pixelCrop,
  ...
) {
  ...
 return new Promise((resolve) => {
    canvas.toBlob((file) => {
      resolve(URL.createObjectURL(file));
    }, "image/png");
  });

我的尝试：

正在将 blob url 转换为 blob 对象，然后再转换为文件格式

 for (let i = 0; i < imageUrls.length; i++) {
   console.log("This is from within the loop: imageURL", imageUrls[i]);
let blob = new Blob([imageUrls[i]], { type: "image/jpg" });
console.log("Blob is ", blob);
   var myFile = blobToFile(blob, "myimage.jpg");

// uploading code goes here [find the code below]

}

将 blob url 转换为 blob 对象，然后转换为 base64

 let reader = new FileReader();
   reader.readAsDataURL(blob); // converts the blob to base64 and calls onload

   reader.onloadend = async function () {
     let myFile = reader.result; // data url
     // uploading code goes here [find the code below]
   }

将其保存在 cloudinary 中的上传代码如下。

console.log(typeof myFile);
        data.append("file", myFile);
        data.append("upload_preset", "myPreset");

        const res = await fetch(
          "https://api.cloudinary.com/v1_1/dpurb6xes/image/upload",
          {
            method: "Post",
            body: data,
          }
        );
        const response = await res.json();

        console.log(response.secure_url);

尝试 1 的输出如下：

尝试 2 的输出如下：

那有什么好的要求呢？？

Answer 1

在这两种情况下，您实际上都是将 imageUrl 转换为 blob。由于某种原因，它不起作用。

而是将 imageUrl 直接转换为适合我的 blob。

代码如下：

const getBase64FromUrl = async (url) => {
    const data = await fetch(url);
    const blob = await data.blob();
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => {
        const base64data = reader.result;
        resolve(base64data)
      };
    });
  };

然后像这样使用函数。

const myImage = await getBase64FromUrl(imageUrls[i]);

将 blob url 转换为文件或 Base64 以上传到 cloudinary

Convert blob url to file or Base64 to upload to cloudinary

base64

blob

file

cloudinary

reactjs