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

How do you upload a file to a pre-signed POST URL from a browser to Minio or S3 using javascript

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 域分开。

为了回答这个问题,我想看一个使用 XMLHttpRequest、Axios、superagent 或 Fetch 的跨域工作的完整示例。

我注意到有一些与此类似的问题和一些答案,但它们看起来都非常过时并且技术在不断发展。所以我不认为这是一个重复的问题。

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

node presign-post-server.js

http://localhost:8080 访问浏览器。单击上传文件,只需上传所选文件将通过预签名 post 策略样式上传。 [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