# put-file-tools

> ## 序言

Latest version **0.0.14** (published 2023-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install put-file-tools
pnpm add put-file-tools
yarn add put-file-tools
bun add put-file-tools
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2023-08-17 |
| First published | 2023-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 48.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | dqr |
| Maintainers | dengqiurong |
| Keywords | 上传, uploader, http, request, XMLHttpRequest, fetch, https, vue3 |

## Links

- npm: https://www.npmjs.com/package/put-file-tools
- Repository: https://github.com/dqrcodebase/put-file-tools
- Homepage: https://github.com/dqrcodebase/put-file-tools#readme
- Issues: https://github.com/dqrcodebase/put-file-tools/issues
- npm.io page: https://npm.io/package/put-file-tools

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.36
- [axios](https://npm.io/package/axios.md) ^1.4.0
- [spark-md5](https://npm.io/package/spark-md5.md) ^3.0.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

- 0.0.14 (latest) — 2023-08-17
- 0.0.13 — 2023-08-11
- 0.0.12 — 2023-08-10
- 0.0.10 — 2023-08-08
- 0.0.9 — 2023-08-01
- 0.0.8 — 2023-07-22
- 0.0.7 — 2023-07-21
- 0.0.6 — 2023-07-21
- 0.0.5 — 2023-07-21
- 0.0.4 — 2023-07-20
- 0.0.1 — 2023-07-18

## README

# put-file-tools 适用于vue3的大文件上传插件

## 序言

> put-file-tools 支持大文件上传，断点续传，实时获取上传状态

## 属性

| 参数                |                  说明                           | 类型           |  可选值      |  默认值                  |
| ------------------- | ------------------------------ | ------------- | -------------| ---------------------------------------- |
| chunkSize           | 切片大小                                        | number         | —            | 10 * 1024 * 1024         |
| inspectRequest      | <div style="width: 200pt"> 校验文件是否在服务器中存在,已上传返回true，未上传返回false，上传部分切片返回切片hash数组,数组示例：['537746f9cfb594a7','69898a563de05a1a']</div>     | function(hash)       | —     | —        |
| uploadApiUrl        | 上传文件的接口地址                               | string        | —     | —        |
| concurrencyNumber   | 切片上传的并发数                                 | number        | —     | 3         |

## 方法

| 事件名               |                  说明                           | 回调参数          |
| ------------------- | ------------------------------------------------ |  ------- |
| onChange            | 文件状态改变时的钩子，添加文件会被调用     | function(file)         |
| onUploadProgress    | 返回文件上传进度                                  | function(progress)         |
| uploadError         | 上传失败                                         |function(error)        |
| onFinish            | 上传完成                                         |function(hash)        |

## 安装使用

```
$ npm install put-file-tools
```

```
$ yarn add put-file-tools
```
```vue

<script setup>
import { ref } from 'vue'
import PutFileTools from 'PutFileTools'
import axios from 'axios'

let fileProgress = ref(0)
const inspectApiUrl = '/api/uploadChunk/inspect'
const uploadApiUrl = '/api/uploadChunk'
const uploadFinishApiUrl = '/api/uploadChunk/finish'

// 检查文件是否存在服务器中
async function inspectRequest(hash, file) {
  const res = await axios({
    method: 'POST',
    url: `${inspectApiUrl}/${hash}`,
    data: { hash, name: file.name, size: file.size, type: file.type },
  }).catch((error) => {
    console.log('inspectRequest  error:', error)
  })
  return res.data.data
}

// 上传进度
function onUploadProgress(progress) {
  fileProgress.value = progress
  console.log('onUploadProgress  progress', progress)
}

function onChange(file) {
  // console.log('onChange  file',file)
}

// 文件切片全部上传完成
async function onFinish(hash) {
  const res = await axios({
    method: 'GET',
    url: `${uploadFinishApiUrl}/${hash}`,
  }).catch((error) => {
    console.log('inspectRequest  error:', error)
  })
}
function uploadError(err) {
  console.log('uploadError err',err);
}
</script>

<template>
  <main>
    <PutFileTools
      :chunkSize="1024 * 1024 * 100"
      :uploadApiUrl="uploadApiUrl"
      :inspectRequest="inspectRequest"
      @onUploadProgress="onUploadProgress"
      @onChange="onChange"
      @onFinish="onFinish"
      @uploadError="uploadError"
    />
  </main>
</template>
```

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