# @imllz/nos-uploader

> A nos upload lib.

Latest version **1.0.1** (published 2020-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @imllz/nos-uploader
pnpm add @imllz/nos-uploader
yarn add @imllz/nos-uploader
bun add @imllz/nos-uploader
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-07-13 |
| First published | 2020-06-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 177.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | imzll0218@163.com |
| Maintainers | imzll |
| Keywords | nos, upload |

## Links

- npm: https://www.npmjs.com/package/@imllz/nos-uploader
- Repository: https://github.com/imllz/nos-uploader
- Homepage: https://github.com/imllz/nos-uploader#readme
- Issues: https://github.com/imllz/nos-uploader/issues
- npm.io page: https://npm.io/package/@imllz/nos-uploader

## Dependencies (2)

- [spark-md5](https://npm.io/package/spark-md5.md) ^3.0.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.2

## Recent versions

- 1.0.1 (latest) — 2020-07-13
- 1.0.0 — 2020-06-15

## README

## nos-uploader

### 特性

* 前端分块直传 nos（串行）
* 大文件并行上传 & 断点续传，需要业务后端支持

### useage

```
npm i @imllz/nos-uploader -S
```

### API

#### 构造函数 new NosUploader(options: object)

* @param [options.file]: File 必须的。文件对象
* @param [options.namespace]: String 可选的。用于将 md5 相同的文件做区分
* @param [options.chunkSize]: Number 分块大小，默认10M
* @param [options.retryCount]: Number 失败重试次数, 默认3次
* @param [options.init]: Function 必须的。获取 nos 上传的信息。直传需要返回 { bucketName, objectName, url, token }。对于非直传需返回, 需支持 check 功能，接口入参 { key }，返回 { url }, url 存在则上传已完成。非 check 情况，入参 { objectName }，返回 { bucketName, key, uploadId }
* @param [options.customUploadChunk]: Function 自定义的分块上传接口，仅用于并行上传。回调参数：{ blob, uploadId, bucketName, objectName, onProgress }。需返回 Promise，数据格式 { url }，并且 promise 实例上提供 abort 方法。
* @param [options.onProgress]: Function 进度回调。回调参数：{ loaded, total, percent }
* @param [options.onSuccess]: Function 成功回调。回调参数：{ url: string }
* @param [options.onError]: Function 失败回调 error

#### Methods
* start(): void 开始上传
* abort(): void 取消上传

#### 对接 UI 组件库
* 以 ant-design-vue upload 组件为例，axios 作为请求库。 antd upload 支持 customRequest 接口，自定义上传逻辑。
```
// 并行上传 & 断点续传
import axios from 'axios'
import NosUploader from '@imzll/nos-uploader'

// antd upload 组件自定义上传请求的工厂方法
export default function createCustomRequest () {
  // upload 组件自定义上传请求，params 为 antd upload 组件上传时回调参数
  return function (params) {
    const { file, onProgress: onProgressOfAntd, onSuccess, onError } = params
    const nosUploader = new NosUploader({
      file,
      async init () {
        // Base.multipartInit 需要业务后端实现
        const result = await Base.multipartInit({
          objectName: file.name
        })
        const { bucketName, key, token, url, uploadId } = result
        return { bucketName, objectName: key, token, url, uploadId }
      },
      // 自定义并行上传分块的方法，回调参数如下
      customUploadChunk ({ blob, uploadId, chunkNumber, bucketName, objectName, chunkSize, chunkCount, onProgress }) {
        const source = CancelToken.source()
        
        const formData = new FormData()
        formData.append('key', objectName)
        formData.append('uploadId', uploadId)
        formData.append('partSize', chunkSize)
        formData.append('partCount', chunkCount)
        formData.append('partNumber', chunkNumber)
        formData.append('blob', blob)

        // Base.multipartUpload 需要业务后端实现
        let promise = Base.multipartUpload(formData, {
          cancelToken: source.token,
          onUploadProgress: onProgress
        }).then(res => {
          if (!res.completeResult) return Promise.reject(new Error('分块上传失败'))
          return res
        })
        // promise 需要提供 abort 取消当次上传的方法
        promise.abort = function () {
          source.cancel('upload chunck canceled')
        }
        return promise
      },
      // 总进度回调
      onProgress ({ loaded, total, percent }) {
        // 触发 antd 进度回调
        onProgressOfAntd({ loaded, total, percent })
      },
      // 成功回调 { url, file, ... }
      onSuccess (res) {
        // 触发 antd 成功回调
        onSuccess(res.url)
      },
      // 失败回调
      // 触发 antd 失败回调
      onError
    })
    // 开始上传
    nosUploader.start()
    // 这里需要返回一个对象给 antd 组件的，必须要有 abort 方法，供组件销毁时调用
    return {
      abort () {
        nosUploader.abort()
      }
    }
  }
}
```

```
// 前端直传，串行
import axios from 'axios'
import NosUploader from '@imzll/nos-uploader'

// antd upload 组件自定义上传请求的工厂方法
export default function createCustomRequest () {
  // upload 组件自定义上传请求，params 为 antd upload 组件回调参数
  return function (params) {
    const { file, onProgress: onProgressOfAntd, onSuccess, onError } = params
    const nosUploader = new NosUploader({
      file,
      async init () {
        // Base.getToken 需要业务后端提供
        const result = await Base.getToken({
          fileNames: [params.file.name]
        })
        const { bucketName, objectName, token, objectUrl } = result[0]
        return {
          bucketName,
          objectName,
          token,
          url: objectUrl
        }
      },
      // 总进度回调
      onProgress ({ loaded, total, percent }) {
        // 触发 antd 进度回调
        onProgressOfAntd({ loaded, total, percent })
      },
      // 成功回调 { url, file, ... }
      onSuccess (res) {
        // 触发 antd 成功回调
        onSuccess(res.url)
      },
      // 触发 antd 失败回调
      onError
    })
    // 开始上传
    nosUploader.start()
    // 这里需要返回一个对象给 antd 组件的，必须要有 abort 方法，供组件销毁时调用
    return {
      abort () {
        nosUploader.abort()
      }
    }
  }
}

```

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