React 미리 지정된 URL이있는 S3에 네이티브 업로드

Question

미리 서명 된 URL을 사용하여 React Native에서 S3로 이미지를 업로드하는 데 아무런 노력이 없었습니다.

노드에 미리 서명 된 URL을 생성합니다 : 여기

const s3 = new aws.S3(); 

const s3Params = { 
    Bucket: bucket, 
    Key: fileName, 
    Expires: 60, 
    ContentType: 'image/jpeg', 
    ACL: 'public-read' 
}; 

return s3.getSignedUrl('putObject', s3Params); 

가 S3에 RN 요청입니다 : 여기 내 코드입니다

var file = { 
    uri: game.pictureToSubmitUri, 
    type: 'image/jpeg', 
    name: 'image.jpg', 
}; 

const xhr = new XMLHttpRequest(); 
var body = new FormData(); 
body.append('file', file); 
xhr.open('PUT', signedRequest); 
xhr.onreadystatechange =() => { 
    if(xhr.readyState === 4){ 
    if(xhr.status === 200){ 
     alert('Posted!'); 
    } 
    else{ 
     alert('Could not upload file.'); 
    } 
} 
}; 
xhr.send(body); 

game.pictureToSubmitUri = assets-library://asset/asset.JPG?id=A282A2C5-31C8-489F-9652-7D3BD5A1FAA4&ext=JPG

signedRequest = https://my-bucket.s3-us-west-1.amazonaws.com/8bd2d4b9-3206-4bff-944d-e06f872d8be3?AWSAccessKeyId=AKIAIOLHQY4GAXN26FOQ&Content-Type=image%2Fjpeg&Expires=1465671117&Signature=bkQIp5lgzuYrt2vyl7rqpCXPcps%3D&x-amz-acl=public-read

오류 메시지 :

<Code>SignatureDoesNotMatch</Code> 
<Message> 
The request signature we calculated does not match the signature you provided. Check your key and signing method. 
</Message> 

내가 생성 된 URL을 사용하여 S3에 성공적으로 컬 이미지 수, 나는 성공적으로 RN (그러나 나는 단지 requestb.in에 원시 데이터를 그렇게하지 볼 수 있습니다에서 requestb.in을 게시 할 수있을 것 이미지가 제대로 표시되는지 100 % 확인하십시오.) 모든이를 바탕으로

는

, 나는 내 이미지가 제대로 기간을 업로드하지 않거나 2) 어떻게 든 방법은 S3 내 요청이오고 그럼 어떻게 다른 원) 1까지 내 문제를 좁혀했습니다.

어떤 도움 muuuuuucchhhh 될 것이라고 감사!

이 성공적으로 몸이 단지 텍스트 ({ '데이터': '푸'}) 인 경우 S3하는 RN에서 게시 할 수 UPDATE. 아마 AWS는 mutliform 데이터를 좋아하지 않습니다. RN에서 파일로 보내려면 어떻게해야합니까 ???

Answer 1

FormData은 multipart/form-data 요청을 생성합니다. S3 PUT 개체의 요청 본문이 파일이어야합니다.

당신은 FormData로 포장하지 않고 요청 본문에 파일을 전송해야합니다

function uploadFile(file, signedRequest, url) { 
    const xhr = new XMLHttpRequest(); 
    xhr.open('PUT', signedRequest); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) { 
     if(xhr.status === 200) { 
     alert(url); 
     } else { 
     alert('Could not upload file.'); 
     } 
    } 
    }; 
    xhr.send(file); 
}; 

브라우저에서 예를 들어 https://devcenter.heroku.com/articles/s3-upload-node를 참조하십시오. Content-Type 헤더가 서명 된 URL 요청과 일치하는지 확인하십시오.