Как установить расширение для нового File(), преобразованного из строки base64?

Я обрезал изображение с помощью act-image-crop, который по умолчанию конвертирует его в URL-адрес BLOB-объекта. Я преобразовал URL-адрес BLOB-объекта в строку base64, а затем попытался преобразовать его в файл. Но когда я отправляю этот файл в Amazon S3, он не отправляет изображение в ответ, он просто отправляет URL, который мне ничего не дает. Я подумал, что это потому, что при создании файла не было никакого расширения, но я не могу добавить расширение при создании файла. Как мне сделать так, чтобы сервер отвечал правильным изображением?

const fetchAsBlob = url => fetch(url)
     .then(response => response.blob());

    const convertBlobToBase64 = blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
       reader.onerror = reject;
       reader.onload = () => {
      resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    });

    fetchAsBlob(this.state.croppedImageUrl)
    .then(convertBlobToBase64)
    .then(result => { 

      console.log("This is base64", result);

      function urltoFile(url, filename, mimeType){
        return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename, {type:mimeType});})
        );
    }

    urltoFile(result, 'finalImageToUpload', 'image/jpeg')
    .then(function(finalFileImageToUpload){
      console.log("this is final", finalFileImageToUpload); 
      let bodyFormData = new FormData();
      bodyFormData.set("new", finalFileImageToUpload );
      })
    })
  }

// POST для амазонки

 axios({
        method: "post",
        url:"/tstack/index.php? 
 option=com_oauth_manager&task=oauth.upload&format=json",
        data: bodyFormData,
        config: { headers: { 'Content-Type': 'multipart/form-data' } 
  }
      })
        .then(response => {
          console.log("This is response ",response);
          return (form[target.name] = response.data.path);
        })
        .catch(err => {
          console.log(err);
        });

Пожалуйста, проверьте этот скриншот: https://imgur.com/a/saLaxzI

Строка base64 верна, я попытался сгенерировать изображение в codebeautify.org, и оно действительно дает обрезанное изображение. Я преобразовал base64 в файл (файл с именем "this final" на скриншоте), используя вышеупомянутые функции, и разместил его на сервере, но, как вы можете видеть в response.data, я не получаю изображение как результат. Почему это так и как я могу получить изображение? Может быть, если я могу добавить расширение, как я уже говорил ранее, оно будет работать? Если так, то как мне это сделать?/

Строка base64 верна, я попытался сгенерировать изображение в codebeautify.org, и оно действительно дает обрезанное изображение. Я преобразовал base64 в файл (файл с именем "this final" на скриншоте), используя вышеупомянутые функции, и разместил его на сервере, но, как вы можете видеть в response.data, я не получаю изображение как результат. Почему это так и как я могу получить изображение? Может быть, если я могу добавить расширение, как я уже говорил ранее, оно будет работать? Если да, то как мне это сделать?

0 ответов

Другие вопросы по тегам