JavaScriptを使用して、ブラウザからMinioまたはS3に事前に署名されたPOST URLにファイルをアップロードする方法

Question

This articleは、フォームを使用してAmazon S3またはminioにファイルをアップロードする方法を示しています。最も安全であるように見えるので、事前署名されたPOST URLポリシーメソッドを使用したいと思います。

ただし、ブラウザを使用してプログラムをミニオまたはS3にプログラムでアップロードしたいとします。言い換えれば、私はフォームではなく、javascriptを使いたいと思っています。

私は.field()と.attach()操作を使用して、フォームフィールドを設定してファイルをアップロードするのに使いやすい、superagentをよく知っています。

これは、ノードで動作します。これは、ブラウザでは動作しません

let cdnAgent = superagent; 
    let req = cdnAgent.post(r.data.pictureSet.uploadLink); 
    _.each(uploadForm, function(value, key) { 
    req.field(key, value); 
    }); 
    // upload file via the created signed policy 
    return req 
    .set('Content-Type', 'application/octet-stream') 
    .attach('file', 'test/data/test.jpg'); 
}).then(r => { 

しかし、.attach()がサポートされていない、と私はその周りに働いていたとき、私のjavascriptのドメインが分離されているので、私はCORSの問題に遭遇しました私のminioまたはS3ドメインからのドメイン。

この質問に答えるには、ドメイン間で動作するXMLHttpRequest、Axios、superagent、またはFetchを使用した完全な例をご覧ください。

これにはいくつかの類似の質問といくつかの回答がありますが、すべてが古くなっているように見え、技術は動いています。だから私はこれが重複した質問ではないと思う。

Answer 1

https://github.com/harshavardhana/minio-js-browser-upload/あなたは、単にこのレポのクローンを作成し、その後http://localhost:8080で

node presign-post-server.js 

訪問ブラウザを実行することができます。アップロードファイルをクリックして、選択したファイルをアップロードするだけです。 [1]

現在、この例は、https://play.minio.io:9000とuploadsバケットを示しています。 [2]

[1] https://github.com/harshavardhana/minio-js-browser-upload/blob/master/index-post.html

[2] https://github.com/harshavardhana/minio-js-browser-upload/blob/master/presign-post-server.js