Изображение повреждено при загрузке в AWS S3 с реагировать-native-fs - PullRequest
Новая
       59

Изображение повреждено при загрузке в AWS S3 с реагировать-native-fs

0 голосов
/ 24 мая 2019

Я успешно загрузил изображение в свою корзину S3 с предварительно подписанным URL-адресом, с консоли aws я могу загрузить его и отобразить. Вот код с простым и понятным JavaScript: 

const uploadUrl = 'https://myApp.s3.eu-central-1.amazonaws.com/myAppImages/3b2ab536....99&X-Amz-SignedHeaders=host'

const imageLocalPath= RNFS.DocumentDirectoryPath+'/images/3b2ab536-1256-49f5-a4bb-a42e213260f2.jpg'

const data = ({ uri: 'file://'+imageLocalPath, type: 'image/jpeg', name:  imageId +'.jpg',})


const futch = (url, opts, onProgress) => {
    return new Promise( (res, rej)=>{
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'PUT', url);
        xhr.setRequestHeader('Content-Type','image/jpeg');
        xhr.onload = e => res(e.target);
        xhr.onerror = rej;
        if (xhr.upload && onProgress)
            xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
        xhr.send(opts.body);
    });


    futch(uploadUrl, {
      method: 'PUT',
      body: data
    }, (e) => {
      const progress = e.loaded / e.total;
      this.setState((prevState) => {
        return { progress: prevState.progress}
      })
    }).then((res) => console.log('response from futch: ',res), (e) => console.log('error from futch: ',e))

Когда я пытаюсь использовать RNFS, изображение загружено, я могу загрузить его с консоли S3, но не могу отобразить его. 

const uploadUrl = 'https://myApp.s3.eu-central-1.amazonaws.com/myAppImages/3b2ab536....99&X-Amz-SignedHeaders=host'

const imageLocalPath= RNFS.DocumentDirectoryPath+'/images/3b2ab536-1256-49f5-a4bb-a42e213260f2.jpg'


let fileToUpload = [{
      name: imageId +'.jpg',
      filename: imageId +'.jpg',
      filepath:  imageLocalPath,
      filetype: 'image/jpeg'
    }]

RNFS.uploadFiles({
      toUrl: uploadUrl,
      files: fileToUpload,
      headers: {
        "Content-Type": "multipart/form-data",
      },
      method: 'PUT',
      begin: this.setState({status:'uploadInitiated'}),
      progress:this.setState({status:'upload In Progress'}),
      }).promise.then((response) => {
        if (response.statusCode == 200){
           this.setState({status:'upload done!'})
        } else {
          console.log('SERVER ERROR');
        }
      })
      .catch((err) => {
        if(err.description === "cancelled") {
          // cancelled by user
        }
        console.log('error catched: ',err);
      });

Похоже, что RNFS отправляет файл не в нужном формате, должно быть что-то, что мне не хватает.

...