前端使用TypeScript实现上传文件到MinIO

2023-11-25 07:23:38

前言

随着互联网技术的飞速发展，前端技术也在不断进步，其中文件上传功能是前端开发中常见的需求。传统的HTTP上传和FTP上传存在诸多限制，如可靠性低、性能较差等。而对象存储服务（Object Storage Service）的出现，为前端文件上传提供了更为高效便捷的解决方案。本文将介绍如何使用TypeScript实现前端文件上传到MinIO对象存储服务。

MinIO 简介

MinIO是一个开源、高性能的对象存储服务，兼容Amazon S3 API。它支持多种存储介质，如本地文件系统、云存储和分布式文件系统。MinIO提供了一个RESTful API，允许用户轻松地上传、下载、删除和管理对象。

TypeScript 简介

TypeScript是JavaScript的一个超集，添加了类型系统和面向对象编程特性。它可以编译为纯JavaScript代码，运行在所有支持JavaScript的平台上。TypeScript的类型系统有助于确保代码的正确性和可维护性。

文件上传实现

使用TypeScript实现前端文件上传到MinIO的过程主要包括以下步骤：

初始化 MinIO 客户端 ：

import { Minio, PutObjectOptions } from 'minio';

const minioClient = new Minio.Client({
  endPoint: 'localhost',
  port: 9000,
  useSSL: false,
  accessKey: 'minio',
  secretKey: 'minio123'
});

上传文件 ：

const file = document.getElementById('file-input') as HTMLInputElement;

const putObjectOptions: PutObjectOptions = {
  contentType: file.files[0].type
};

minioClient.putObject('my-bucket', file.files[0].name, file.files[0], putObjectOptions, (err, objInfo) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('文件上传成功');
});

获取文件 ：

minioClient.getObject('my-bucket', file.files[0].name, (err, dataStream) => {
  if (err) {
    console.error(err);
    return;
  }

  dataStream.pipe(fs.createWriteStream('downloaded-file'));
});

示例代码

以下是一个完整的示例代码，展示了如何使用TypeScript实现前端文件上传到MinIO：

import { Minio, PutObjectOptions } from 'minio';
import { useRef, useState } from 'react';

const FileUpload = () => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isLoading, setIsLoading] = useState(false);

  const uploadFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();

    if (!fileInputRef.current) {
      return;
    }

    const file = fileInputRef.current.files[0];

    if (!file) {
      return;
    }

    setIsLoading(true);

    const minioClient = new Minio.Client({
      endPoint: 'localhost',
      port: 9000,
      useSSL: false,
      accessKey: 'minio',
      secretKey: 'minio123'
    });

    const putObjectOptions: PutObjectOptions = {
      contentType: file.type
    };

    minioClient.putObject('my-bucket', file.name, file, putObjectOptions, (err, objInfo) => {
      if (err) {
        console.error(err);
        return;
      }

      setIsLoading(false);
      console.log('文件上传成功');
    });
  };

  return (
    <form onSubmit={uploadFile}>
      <input type="file" ref={fileInputRef} />
      <button type="submit" disabled={isLoading}>上传文件</button>
    </form>
  );
};

export default FileUpload;