使用pre-signed URLs通过浏览器上传

使用presigned URLs,你可以让浏览器直接上传一个文件到S3服务，而不需要暴露S3服务的认证信息给这个用户。下面就是使用minio-js实现的一个示例程序。

服务端代码

  1. const Minio = require('minio')
  3. var client = new Minio.Client({
  4.     endPoint: 'play.minio.io',
  5.     port: 9000,
  6.     secure: true,
  7.     accessKey: 'Q3AM3UQ867SPQQA43P2F',
  8.     secretKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG'
  9. })

初始化Minio client对象，用于生成presigned upload URL。

  1. // express是一个小巧的Http server封装，不过这对任何HTTP server都管用。
  2. const server = require('express')()
  4. server.get('/presignedUrl', (req, res) => {
  5.     client.presignedPutObject('uploads', req.query.name, (err, url) => {
  6.         if (err) throw err
  7.         res.end(url)
  8.     })
  9. })
  11. server.get('/', (req, res) => {
  12.     res.sendFile(__dirname + '/index.html');
  13. })
  15. server.listen(8080)

这里是presignedPutObject的文档。

客户端代码

程序使用了jQuery.

用户通过浏览器选择了一个文件进行上传，然后在方法内部从Node.js服务端获得了一个URL。然后通过XMLHttpRequest()往这个URL发请求，直接把文件上传到play.minio.io:9000。

  1. <input type="file" id="selector" multiple>
  2. <button onclick="upload()">Upload</button>
  4. <div id="status">No uploads</div>
  6. <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
  7. <script type="text/javascript">
  9.  function upload() {
  10.    [$('#selector')[0].files].forEach(fileObj => {
  11.      var file = fileObj[0]
  12.      // 从服务器获取一个URL
  13.      retrieveNewURL(file, url => {
  14.        // 上传文件到服务器
  15.        uploadFile(file, url)
  16.      })
  17.    })
  18.  }
  20.  // 发请求到Node.js server获取上传URL。
  21.  function retrieveNewURL(file, cb) {
  22.    $.get(`/presignedUrl?name=${file.name}`, (url) => {
  23.      cb(url)
  24.    })
  25.  }
  27.  // 使用XMLHttpRequest来上传文件到S3。
  28.  function uploadFile(file, url) {
  29.      var xhr = new XMLHttpRequest ()
  30.      xhr.open('PUT', url, true)
  31.      xhr.send(file)
  32.      xhr.onload = () => {
  33.        if (xhr.status == 200) {
  34.          $('#status').text(`Uploaded ${file.name}.`)
  35.        }
  36.      }
  37.  }
  39. </script>

现在你就可以让别人访问网页，并直接上传文件到S3服务，而不需要暴露S3服务的认证信息。

原文: https://docs.minio.io/cn/upload-files-from-browser-using-pre-signed-urls.html