застрял в преобразовании base64, сгенерированного из реакции-аватара-редактирования, в blob и загрузил его, используя axios - PullRequest
Новая
       10

застрял в преобразовании base64, сгенерированного из реакции-аватара-редактирования, в blob и загрузил его, используя axios

0 голосов
/ 28 июня 2019

Я пытаюсь использовать реагировать-аватар-редактировать , чтобы обрезать изображение профиля перед его загрузкой, я успешно выполнил реализацию, и теперь я могу получить обрезанное изображение, но проблема в том, что обрезанное изображениеизвлеченный в base64string, первая проблема пыталась преобразовать его в изображение, и после исследования я нашел код ниже, чтобы преобразовать его в BLOB-объект после нескольких попыток решить его несколькими способами 

// code from stack overflow link: https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript#answer-36183085
  convertBase64ToBlob = (url) =>{
    fetch(url)
      .then(res => res.blob())
      .then(blob => {
        this.convertBlobToFormData(blob)
      })
    ;
  }

тогда я хочу отправить его в виде файла, поэтому я использовал это 

convertBlobToFormData = (blob) => {
    let data = new FormData();
    data.append('profile_image', blob)
    this.setState({
      convertedFile: data
    })
  }

и вызов функций происходит, когда пользователь перетаскивает форму обрезки, которую вы видите эту ссылку для получения дополнительной информации о том, как работает пакет 

onCrop(preview) {
    this.setState({preview})
    this.convertBase64ToBlob(preview)
    console.log(this.state.convertedFile)
    
    if(this.state.convertedFile){
      this.props.onChange(this.state.convertedFile)
    };
  }

проблема заключается в том, что при печати большого двоичного объекта в console.log он получает 

Blob {size: 1805, type: "text/html"}

, и это означает, что ему не удалось преобразовать base46string в изображение, которое я могу отправитьдо конечной точки, так что же в этом плохого или как я могу это исправить.

вторая проблема при печати данных формы, которые мы извлекаем из convertBlobToFormData, которые она получает введите описание изображения здесь

так почему для хранения большого двоичного объекта извлекаются данные пустой формы и как я могу их решить

примечание: используемый мной бэкэнд является бэкэндом laravel, разработанным другим разработчиком

1 Ответ

0 голосов
/ 29 июня 2019

После исследования я нашел некоторую информацию, которая помогла мне решить эту проблему.часть проблемы была в бэкэнде, и потому что я отправлял запрос методом put и что распространенная проблема в php при загрузке файла, чтобы решить ее, вы должны отправить файл в форме данных, используя метод post, а не метод put, вы можетенайти подробности здесь

другая часть проблемы заключалась в преобразовании строки base64string в изображение, которая была решена с помощью 

urltoFile=(url, filename, mimeType)=>{
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1];
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){
          return new File([buf], filename, {type:mimeType});
        })
    );
  }

Приведенный выше код преобразует строку base 64 в файл и использует ее 

onCrop(preview) {
    this.setState({preview})
    this.urltoFile(preview, 'a.png')
      .then((file)=>{
        return this.props.onChange(file)
      });
  }

этот код из-за переполнения стека, вы можете найти ответ по этой ссылке

...