如何使用javascript将文件从浏览器上传到预先签名的POST URL到Minio或S3

时间:2017-03-18 00:29:40

标签: amazon-s3 xmlhttprequest axios superagent minio

This article显示了如何使用表单将文件上传到Amazon S3或minio。我想使用预先签名的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()不受支持,当我解决这个问题时,我遇到了CORS问题,因为我的javascript域是一个与我的minio或S3域不同的域。< / p>

要回答这个问题,我希望看到一个使用XMLHttpRequest,Axios,superagent或Fetch的完整示例,它可以跨域工作。

我注意到有一些类似的问题和一些答案,但它们似乎都已经过时,技术已经发展。所以我不认为这是一个重复的问题。

1 个答案:

答案 0 :(得分:1)

https://github.com/harshavardhana/minio-js-browser-upload/你可以简单地克隆这个仓库,然后运行

node presign-post-server.js

访问http://localhost:8080处的浏览器。点击上传文件,只需上传所选文件,即可通过预先签名的邮政政策方式上传。 [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