# @prequest/uploader

> 针对多文件、大文件上传提供了一种便捷的方法，来控制同时进行的任务数量、和文件的切片上传。

Latest version **1.5.2** (published 2022-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @prequest/uploader
pnpm add @prequest/uploader
yarn add @prequest/uploader
bun add @prequest/uploader
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2022-07-10 |
| First published | 2021-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 89 |
| Author | xdoer |
| Maintainers | thomas_han |
| Keywords | http, request, XMLHttpRequest, fetch, https, middleware, interceptor |

## Links

- npm: https://www.npmjs.com/package/@prequest/uploader
- Repository: https://github.com/xdoer/PreQuest
- Homepage: https://pre-quest.vercel.app
- Issues: https://github.com/xdoer/PreQuest/issues
- npm.io page: https://npm.io/package/@prequest/uploader

## Dependencies (2)

- [@xdoer/x](https://npm.io/package/@xdoer/x.md) ^1.0.1
- [@prequest/types](https://npm.io/package/@prequest/types.md) ^1.5.2

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.5.2 (latest) — 2022-07-10
- 1.5.1 — 2022-07-03
- 1.5.0 — 2022-06-18
- 1.4.1 — 2022-05-02
- 1.4.0 — 2022-05-02
- 1.3.10 — 2022-04-18
- 1.3.9 — 2022-04-18
- 1.3.8 — 2022-04-17
- 1.3.7 — 2022-04-17
- 1.3.6 — 2022-04-03
- 1.3.5 — 2022-03-09
- 1.3.3 — 2022-02-27
- 1.3.3-alpha.0 — 2022-02-26
- 1.3.2 — 2022-02-09
- 1.2.6 — 2021-12-18
- … 18 more at https://npm.io/package/@prequest/uploader/versions

## README

# @prequest/uploader

针对多文件、大文件上传提供了一种便捷的方法，来控制同时进行的任务数量、和文件的切片上传。

## 安装

```bash
npm install @prequest/uploader
```

## 使用

下面演示了一个 60M 的文件，切片成了 6 份，进行 6 次 HTTP 请求，其中队列中同时上传的任务有 3 个。

```tsx
import Uploader from '@prequest/uploader'
import { prequest } from '@prequest/xhr'

const Upload = () => {
  const [fileList, setFileList] = useState<File[]>([])
  const uploader = useRef<Uploader | null>(null)

  useEffect(() => {
    uploader.current = new Uploader({
      chipSize: 10 * 1024 * 1024, // 切片大小,10M
      poolLimit: 3, // 同时进行的任务数量
      customFormData(formData, { idx, file, chunk }) {
        // 要上传数据的 formData
        formData.append('name', file.name)
        formData.append('index', `${idx}`)
        formData.append('chunk', chunk)
        return formData
      },
      request(formData, { idx, file, chunk }) {
        // 上传过程
        return prequest.post('/upload', {
          data: formData,
          onUploadProgress(e) {
            console.log(`${file.name} 的第${idx}个分片，已上传:${e.loaded}`)
          },
        })
      },
    })
  }, [])

  async function onSubmit() {
    try {
      // 上传任务
      await uploader.current.upload(fileList)
    } catch (e) {
      console.log('上传文件失败')
    }
  }

  return (
    <div>
      <input type="file" onChange={e => setFileList(e.target.files)} />
      <button onClick={onSubmit}>上传</button>
    </div>
  )
}
```

## 参数

### 配置参数

| 名称           | 类型                                                             | 默认                                                   | 必填 | 含义                  |
| -------------- | ---------------------------------------------------------------- | ------------------------------------------------------ | ---- | --------------------- |
| chipSize       | number                                                           | 10 \* 1024 \* 1024                                     | 否   | 切片大小              |
| poolLimit      | number                                                           | 3                                                      | 否   | 同时上传的任务数量    |
| customFormData | (formData: FormData, opt: CallbackOption) => FormData            | 默认会将 name, index, chunk 三个字段添加到 formData 中 | 否   | 定义要上传的 formData |
| request        | (formData: FormData, opt: CallbackOption) => Promise\<Response\> |                                                        | 是   | 定义要上传的请求方法  |

### CallbackOption

| 名称  | 类型   | 含义       |
| ----- | ------ | ---------- |
| idx   | number | 切片的索引 |
| chunk | Blob   | 切片文件   |
| file  | File   | 原始文件   |

---
_Source: https://npm.io/package/@prequest/uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._