AWS S3で署名付きリクエストを使用して写真をアップロードしますか？

Question

だから私は反応のネイティブアプリケーションがあります。これはちょっとしたものですが、私はs3に画像をアップロードしようとしています。

私はgetSignedUrlルートを使用しました。

ように、クライアントの写真写真、 はそのユーザー フェッチされた署名のURLにPUTリクエストのためにサーバー上のURLを変更し、その後バケット に署名したURLを取得します。

ほとんどの場合、ファイルは右のバケットに入れられ、写真です。しかし、

）このリンクをクリックすると、ファイルをブラウザに表示する代わりにダウンロードできます。

B）ファイルは、私は のにヘッダを追加、data.appendタイプにタイプを変更しようとした画像...そのXMLファイルではなく、フォトショップ

のみを開くことができ署名付きリクエスト 署名付きリクエストにx-amz-ヘッダーを追加する サーバーでファイルタイプをハードコーディング イメージをネイティブモジュールでbase64文字列に変換しても、間違っています。サーバー

uploadToServer() { 

    // alert('coming soon!'); 

    //Go back to profile page 
    this.props.navigation.goBack(); 

    //grab user from navigator params 
    let user = this.props.navigation.state.params.user 
    let pic = this.state.selected; 

    // turn uri into base64 
    NativeModules.ReadImageData.readImage(pic.uri, (image) => { 
     console.log(image); 

     var data = new FormData(); 
     data.append('picture', { 
     uri: image, 
     name: pic.filename, 
     type: 'image/jpeg' 
     }); 

     //get the signed Url for uploading 
     axios.post(api.getPhotoUrl, {fileName: `${pic.filename}`}).then((res) => { 

     console.log("get Photo URL response", res); 

     //update the user with the new url 
     axios.patch(api.fetchUserByID(user.id), {profileUrl: res.data.url}).then((resp) => { 

      console.log("Update User response", resp.data); 
     }).catch(err => errorHandler(err)); 

     //upload the photo using the signed request url given to me. 
     //DO I NEED TO TURN DATA INTO A BLOB? 
     fetch(res.data.signedRequest, { 
      method: 'PUT', 
      body: data 
     }).then((response) => { 
      console.log("UPLOAD PHOTO RESPONSE: ", response); 
     }).catch(err => errorHandler(err)) 
     }).catch((err) => errorHandler(err)) 
    }) 
    } 

へ

クライアント側の呼び出しは、あなたがそれを内に表示させたい場合は、サポートされるXMLフォーマットに画像からコンテンツタイプを変更する必要が出て

router.post('/users/sign-s3', (req, res) => { 
     const s3 = new aws.S3({signatureVersion: 'v4', region: 'us-east-2'}); 
     const fileName = `${req.user.id}-${req.body.fileName}`; 
     const fileType = req.body.fileType; 
     const s3Params = { 
     Bucket: AWS_S3_BUCKET, 
     Key: `images/${fileName}`, 
     Expires: 60, 
     ContentType: 'image/jpeg', 
     ACL: 'public-read' 
     }; 

     s3.getSignedUrl('putObject', s3Params, (err, data) => { 
     if (err) { 
      console.log(err); 
      return res.end(); 
     } 
     const returnData = { 
      signedRequest: data, 
      url: `https://${AWS_S3_BUCKET}.s3.amazonaws.com/${s3Params.Key}` 
     }; 
     res.write(JSON.stringify(returnData)); 
     res.end(); 
     return null; 
     }); 
    }); 

Answer 1

上から署名付きURLロジックをGETブラウザ。

Refer thisに応じてコンテンツタイプを設定します。