如何使用 Cloudinary 客戶端將 Blob URL 轉換為 Base64 字符串並檢索圖像 URL？

Question

我正在使用 React-Dropzone npm 來使用樣式精美的拖放文件上傳器。 我被困在 React-Dropzone 版本 8.2.0 不包含文件的路徑這一事實上，例如只用圖像名稱縮短它。 但是，他們確實提供了 Blob Url。 我不知道如何將 Blob-URL 轉換為 Base64 字符串，然后將其發送到 Cloudinary。

Answer 1

另一種方法可以是：

const url = 'blob:http://uri';

const blobToBase64 = (url) => {
  return new Promise((resolve, _) => {
    // do a request to the blob uri
    const response = await fetch(url);

    // response has a method called .blob() to get the blob file
    const blob = await response.blob();

    // instantiate a file reader
    const fileReader = new FileReader();

    // read the file
    fileReader.readAsDataURL(blob);

    fileReader.onloadend = function(){
      resolve(fileReader.result); // Here is the base64 string
    }
  });
};

// now you can get the 
blobToBase64(url)
  .then(base64String => {
    console.log(base64String) // i.e: data:image/jpeg;base64,/9j/4AAQSkZJ..
  });

// or with await/async
const file = await blobToBase64(url);
console.log(file) // i.e: data:image/jpeg;base64,/9j/4AAQSkZJ..

Answer 2

我想通了：

幾個小時后，一些好心人在 StackOverflow 上發帖，我把它拼湊起來。

const getBlobData = (file) => {
    axios({
      method: "get",
      url: file, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
      responseType: "blob",
    }).then(function (response) {
      var reader = new FileReader();
      reader.readAsDataURL(response.data);
      reader.onloadend = function () {
        var base64data = reader.result;
        const formData = new FormData();
        formData.append("file", base64data);
        formData.append("api_key", YOUR_API_KEY);
        // replace this with your upload preset name
        formData.append("upload_preset", YOUR_PRESET_NAME);//via cloudinary
        axios({
          method: "POST",
          url: "https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/upload",
          data: formData,
        })
          .then((res) => {
            const imageURL = res.data.url;
            //YOU CAN SET_STATE HOWEVER YOU WOULD LIKE HERE.
          })
          .catch((err) => {
            console.log(err);
          });
      };
    });
  };