Minio 教程 - Minio 开源前端上传文件组件Uppy、filepond、dropzone介绍及入门案例

在使用 Minio 作为对象存储时，为了提升用户体验，可以采用一些开源的前端上传组件来简化文件上传的交互流程。以下是三个流行的前端上传组件的介绍及如何与 Minio 集成的入门指南：

1. Uppy

介绍:
Uppy 是一个现代化、可高度定制的开源文件上传库，支持拖放、进度条显示、暂停/恢复上传等功能。它提供了丰富的插件系统，可以很容易地与各种后端服务集成。

与 Minio 集成:
要将 Uppy 与 Minio 集成，你可以使用 @uppy/aws-s3 或 @uppy/companion 插件。由于 Minio 兼容 Amazon S3 API，因此 @uppy/aws-s3 插件可以直接工作，但你需提供 Minio 的访问密钥、秘密密钥和桶名。使用 @uppy/companion 可以更安全地处理预签名URL。

入门案例:

<!-- 引入必要的 Uppy 资源 -->
<link href="https://unpkg.com/@uppy/core@latest/dist/uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/@uppy/core@latest/dist/uppy.min.js"></script>
<script src="https://unpkg.com/@uppy/aws-s3@latest/dist/uppy-aws-s3.min.js"></script>

<script>
const uppy = Uppy.Core();
uppy.use(Uppy.AwsS3, {
  companionUrl: 'https://your-companion-server.com', // 如果使用 Companion
  getUploadParameters(file) {
    // 在这里可以从后端获取预签名URL
    return fetch('/get-signed-url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ fileName: file.name }),
    }).then((res) => res.json());
  },
});

uppy.on('complete', (result) => {
  console.log('所有文件上传完成:', result.successful);
});
</script>

2. FilePond

介绍:
FilePond 是一个易于使用的文件上传控件，它具有响应式设计、即时上传预览、图片优化等功能。它通过插件系统支持多种高级功能，如拖放、文件验证等。

与 Minio 集成:
与 Minio 集成时，可以通过自定义处理函数来生成预签名URL，然后将这些URL传递给FilePond进行上传。

入门案例:

<!-- 引入 FilePond 资源 -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
FilePond.setOptions({
  server: {
    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
      // 发送请求到后端获取预签名URL
      fetch('/get-signed-url', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ filename: file.name }),
      })
      .then(res => res.json())
      .then(data => {
        load(data.url);
      })
      .catch(err => {
        error(err);
      });
    },
  },
});

FilePond.create(document.getElementById('pond'));
</script>
<div id="pond"></div>

3. Dropzone

介绍:
Dropzone.js 是一个轻量级的、易于使用的JavaScript库，使得在网页上实现拖拽文件上传变得非常简单。它提供了丰富的事件和回调函数，以及一个美观的用户界面。

与 Minio 集成:
与 Minio 集成时，可以通过Dropzone的init事件来动态获取预签名URL，然后利用这些URL进行文件上传。

入门案例:

<!-- 引入 Dropzone CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css" integrity="..." crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js" integrity="..." crossorigin="anonymous"></script>

<script>
Dropzone.options.myDropzone = {
  init: function() {
    thisDropzone = this;
    thisDropzone.on("sending", function(file, xhr, formData) {
      // 在发送前获取预签名URL
      fetch('/get-signed-url', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ filename: file.name }),
      })
      .then(res => res.json())
      .then(data => {
        formData.append('key', data.key);
        formData.append('acl', data.acl);
        formData.append('policy', data.policy);
        formData.append('AWSAccessKeyId', data.AWSAccessKeyId);
        formData.append('signature', data.signature);
      })
      .catch(err => {
        console.error('Error getting signed URL:', err);
      });
    });
  },
};
</script>

<form action="YOUR_MINIO_UPLOAD_ENDPOINT" class="dropzone" id="myDropzone"></form>

请注意，以上示例中的 /get-signed-url 路径需要你在后端实现，以生成并返回预签名的上传URL给前端使用。每个库的具体实现细节可能会有所不同，但核心思想都是通过后端生成的安全凭证来授权前端直接上传文件到 Minio。