# upload-sdk

**Repository Path**: yimeng99/upload-sdk

## Basic Information

- **Project Name**: upload-sdk
- **Description**: 从0到1开发来整个 upload-sdk，该 SDK 为所有文件上传特别是大文件上传的场景提供前后端的支撑，统一了所有文件上传的开发方式，完成了从底层协议、到工具类、到前端组件、再到后端中间件的开发。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-25
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# upload-sdk

#### 介绍
从0到1开发来整个 upload-sdk，该 SDK 为所有文件上传特别是大文件上传的场景提供前后端的支撑，统一了所有文件上传的开发方式，完成了从底层协议、到工具类、到前端组件、再到后端中间件的开发。

#### 软件架构
软件架构说明


#### 安装教程

1.  安装客户端

``` shell
npm install @upload-sdk/client
// 或者
yarn add @upload-sdk/client
// 或者
pnpm add @upload-sdk/client
```

2. 服务端

服务端需要单独部署，或者是按照我们的文件上传接口自己实现

3. 使用以 vue3 为例

简单使用为核心，只需要导入这样即可使用我们的上传组件了
```vue
<template>
  <PrUpload v-model="fileList" :config="config"></PrUpload>
</template>


<script setup>
import { ref, reactive } from 'vue'
import { PrUpload } from '@upload-sdk/client'

const fileList = ref([])
const config = reactive({
  // 这里是需要传入相关的组件配置
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
})
</script>
```

#### 主要功能

1.  本组件主要解决上传文件所遇到的痛点问题，封装了web端、H5、uniApp的上传组件，方便使用。
2.  对文件做了上传前的类型校验（安全校验）、压缩（主要是移动端拍照的图片需要进行压缩）。
3.  定义了文件上传协议，特别是针对于大文件上传，内置分片上传和断点续传功能。
4.  针对多个文件上传场景，已内置任务队列来解决多文件上传所带来的效率问题。
5.  对于弱网环境，对其进行了特殊的处理和优化，降低了上传失败的风险。
6.  定义删除文件的逻辑、对文件进行精细化管理，在物理服务器方面，有效降低了磁盘的使用空间。
7.  动态展示出文件上传进度，提升用户体验。
8. 移动端扫码上传功能

8. 请求重试
#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request



1. 打包后文件没有 package.json 文件




采用 请求队列 + webWorker 的方式来实现


## 使用教程 core

### 上传单个文件
```ts
import { useUpload } from 'upload-sdk/core'
const upload = useUpload()

const uploadOneFile = (file: File) => {
  // 这里可以配置对应的回调函数 -- 如果没有配置，就使用内置的函数
  const task = upload.uploadFile(file, {
    // 上传地址
    action: '/upload/file',
    // 请求头
    headers: {},
    // 上传进度
    onProgress: (progress) => {
      console.log('progress', progress)
    },
    // 上传成功
    onSuccess: (res) => {
      console.log('success', res)
    },
    // 上传失败
    onError: (err) => {
      console.log('error', err)
    },
    // 上传取消
    onCancel: () => {
      console.log('cancel')
    },
    // 上传
    onUpload: (file) => {
      
    },
    // 上传前操作
    onBeforeUpload: (file) => {
      
    }
  })

  // 开始上传
  task.start()
}
```