返回

多文件进度上传：Vue+Minio强强联手，高效又直观

前端

前言

在现代Web开发中，多文件进度上传是一个至关重要的功能。它允许用户同时上传多个大文件，并实时查看上传进度。最近，我遇到了一个特别的需求，即在提交表单的同时上传模型资源，并且要显示上传进度。为了满足这一需求，我采用了Vue和Minio这两个强大的工具。

Minio简介

Minio是一个开源的对象存储服务，它完全兼容Amazon S3 API。它提供了一系列特性，包括：

  • 无限可扩展的文件系统
  • 高可用性和大规模吞吐量
  • 丰富的API和工具

Vue简介

Vue是一个渐进式的JavaScript框架，它以其响应性、轻量性和灵活性而著称。它提供了一系列功能，包括：

  • 数据绑定和响应式系统
  • 单文件组件
  • 路由和状态管理

实现过程

1. 初始化Minio客户端

import { Minio } from 'minio';

const minioClient = new Minio.Client({
  endPoint: 'minio.example.com',
  port: 9000,
  useSSL: false,
  accessKey: 'minio-access-key',
  secretKey: 'minio-secret-key'
});

2. 创建桶（Bucket）

const bucketName = 'model-resources';
await minioClient.makeBucket(bucketName);

3. 监听表单提交事件

const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  ...
});

4. 处理上传文件

const files = event.target.querySelectorAll('input[type=file]');
for (const file of files) {
  if (file.files.length > 0) {
    await uploadFile(file.files[0]);
  }
}

5. 上传文件并显示进度

const uploadFile = async (file) => {
  const progressHandler = (progress) => {
    console.log(`Uploading ${file.name}... ${progress}%`);
  };
  await minioClient.putObject(bucketName, file.name, file, {
    progress: progressHandler
  });
  console.log(`File ${file.name} uploaded successfully!`);
};

SEO优化