2017-03-18 936 views
1

This article顯示如何使用表單將文件上傳到Amazon S3或minio。我想使用預先簽名的POST URL策略方法,因爲它看起來是最安全的。如何將文件上傳到使用javascript的瀏覽器到Minio或S3的預簽名POST URL?

但是,我希望使用瀏覽器以編程方式上傳文件到minio或S3。換句話說,我想使用JavaScript,而不是表單。

我是一個節點用戶,熟悉superagent,使用.field().attach()操作來設置表單域並上傳文件非常簡單。

此作品在節點:

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問題域名從我的迷你或S3域。

爲了回答這個問題,我希望看到一個使用XMLHttpRequest,Axios,superagent或Fetch的完整示例,它可以跨域使用。

我注意到有一些類似的問題,這個和一些答案,但他們都顯得非常過時,技術已經開始。所以我不認爲這是一個重複的問題。

+1

剷鬥支撐[定製CORS響應(http://docs.aws.amazon.com/AmazonS3/latest/dev/cors。 html),所以你應該能夠解決這個問題的一部分。 –

+0

在minio上默認使用CORS,這是我測試的目的。但是,感謝亞馬遜CORS鏈接,我可能會在某個時候需要。 –

+0

對不起,我的大腦中有S3,完全掩蓋了多次提及minio的情況。 –

回答

1

https://github.com/harshavardhana/minio-js-browser-upload/你可以簡單地複製這個回購協議,然後在http://localhost:8080運行

node presign-post-server.js 

訪問瀏覽器。點擊上傳文件,只需上傳選定的文件將通過預定的郵政政策風格上傳。 [1]

目前的例子只是指向https://play.minio.io:9000uploads桶。 [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

+0

工作的例子,愛它!現在把它打包在一個docker鏡像中:-)。但非常感謝,這是一個規範的XMLHttpRequest示例。 SuperAgent在OP中的評論中回答。現在有人只需要發佈Axios的答案,下一個noob會更好... –

相關問題