封装前端直传server、minio、obs、oss、aws等对象存储，让上传更简洁，开发更轻松

好想吃胖。

已于 2025-03-10 14:59:58 修改

阅读量1.2k

点赞数 38

文章标签：前端云计算

于 2025-03-09 23:57:52 首次发布

本文链接：https://blog.youkuaiyun.com/lll99577925/article/details/146141537

版权

场景

大多数项目多多少少都会存在上传需求。有些项目存在（共有云、私有化部署）（不同环境采用不同对象存储）等情况，这时可能就需要编写多套代码用来接入多种对象存储、还需要考虑大文件正常上传等多个场景。
该插件屏蔽了不同对象存储云厂商SDK之间的差异性，提供统一接口来快速接入上传（包含初始化、上传、大文件上传，取消上传、进度回调），节省研发时间。
兼容常用对象存储平台：自己编写的本地服务（normal）、obs、oss、minio、aws（V2）。

安装使用

ESM

import ObjectStorage from "object-storage-js"
// 初始化
let instance = new ObjectStorage({
  type: normal | oss | obs | minio | aws;
  // AK
  accessKey?: string;
  // SK
  secretKey?: string;
  // STS-token
  securityToken?: string;
  // 服务端点
  endPoint?: string;
  // 桶名 直传服务器无需传递该参数
  bucketName?: string;
  // sdk额外参数
  sdkOtherParams?: object;
  // sdk库 --- 使用者自己传入，可控制项目中包的大小。
  sdkObject?: any;
})
// 上传
instance.upload({
  // 文件对象
  file: File;
  // 文件名 --- 对象存储路径
  fileName?: '';
  // 最大文件大小字节 --- 如果超出该文件大小，插件自动采用切片上传
  maxSize?: number;
  // 切片大小字节
  partSize?: number;
  // 切片上传队列个数 --- 每次保证多少切片并行上传
  queueLength?: number;
  // 上传地址 --- 本地服务需要
  uploadUrl: string;
  // 合并地址 --- 本地服务需要
  mergeUrl?: string;
  // 上传进度回调 -- 文件整体上传进度
  onUploadProgress?: (params: ProgressCallback) => void;
  // 中断上传 --- 调用回调参数params中的cancel方法取消文件上传
  onCancel?: (params: any) => void;
})

UMD

<script src="xxx/ObjectStorage.umd.js"></script>
插件暴露出了ObjectStorage全局类用来调用，逻辑同ESM相同

说明项

为保证项目的大小，插件未在包中加入云厂商的SDK，需初始化时自行传入项目所需的SDK，插件参数为sdkObject

如需使用aws、minio这类S3协议的SDK，采用aws V2的包（不要用V3）。

传输到自己的服务器时，服务器需采用插件中的参数来定义接口入参（切片上传与普通上传均采用一个接口），例如如下java 代码

// 上传
@PostMapping(value = "upload")
public Boolean upload(@RequestParam(value = "file") MultipartFile file // 文件 （切片文件）,
          @RequestParam(value = "chunk", required = false) Integer chunk // 当前片数 （切片需要）,
          @RequestParam(value = "chunks", required = false) Integer chunks // 总片数 （切片需要）,
          @RequestParam(value = "uploadId", required = false) String uploadId // 切片批次上传id（切片需要，该id插件生成，无需服务提供）,
          @RequestParam(value = "fileName", required = false) String fileName // 文件名)

// 合并切片（切片上传需要）
@GetMapping(value = "merge")
public Boolean merge(@RequestParam("uploadId") String uploadId, @RequestParam("fileName") String fileName)

TIPS

为什么不提供预签名上传参数？

预签名上传无法做到大文件上传，并且前端可直接采用axios等网络请求库直接上传。

为什么不提供断点续传、秒传？

1、断点续传实际应用场景感觉不太大，暂未提供。。。2、上传之前项目可以自己计算文件md5，如果存在就无需调用上传方法。

如何调用SDK提供的方法？

插件只封装了上传相关的方法，如果需要调用listBuckets方法等，直接采用new ObjectStorage实例化的对象调用instance成员变量即可（该变量就是SDK初始化后的变量）。

仓库中提供的有简易版的demo，可以作为参考。npm包地址：object-storage-js - npm 仓库地址：https://gitee.com/lilele01/object-storage-js