자바 스크립트를 사용하여 브라우저에서 Minio 또는 S3로 미리 서명 된 POST URL로 파일을 업로드하는 방법

Question

This article은 양식을 사용하여 Amazon S3 또는 minio에 파일을 업로드하는 방법을 보여줍니다. 가장 안전한 것으로 보이는 사전 서명 된 POST URL 정책 방법을 사용하고 싶습니다.

그러나 브라우저를 사용하여 프로그래밍 방식으로 minio 또는 S3에 파일을 업로드하고 싶습니다. 즉, 양식이 아닌 자바 스크립트를 사용하고 싶습니다.

나는 노드 사용자이고 .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()은 지원되지 않습니다, 나는 그 주위에 일할 때, 나는 별도의 내 자바 스크립트 도메인 때문에 CORS 문제에 달렸다 내 미니 오 또는 S3 도메인의 도메인.

이 질문에 답하기 위해 도메인 전체에서 작동하는 XMLHttpRequest, Axios, superagent 또는 Fetch를 사용하는 완전한 예제를보고 싶습니다.

이 질문과 답변에 비슷한 질문이 있지만 모두 구형 인 것으로 나타 났으며 기술이 이전되었습니다. 그래서 저는 이것이 중복 질문이라고 생각하지 않습니다.

Answer 1

https://github.com/harshavardhana/minio-js-browser-upload/ 당신은 단순히이 REPO를 복제 한 후 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