big-upload

使用 TypeScript 实现大文件分片上传

安装

 npm i big-upload -S

使用

基本使用方法:

import upload from 'big-upload'

// upload(el: string | element, action: string, config?: object)
upload('#el', '/upload')

// 或者

// upload(config: object)
upload({
  el: '#el',
  action: '/upload'
})

如果你不需在选取文件后立即进行上传，而是点击按钮上传，你应当使用 .submit():

import upload from 'big-upload'

const ul = upload({
  el: '#el',
  action: '/upload',
  autoUpload: false
})

document.querySelector('#btn').onclick = () => {
  ul.submit()
}

API

config 配置

参数	说明	类型	默认值
`el`	必选参数，绑定元素	string / element	--
`action`	必选参数，上传的地址	string	--
`data`	上传时附带的额外参数	object	--
`params`	url地址参数	object / URLSearchParams	--
`name`	上传的文件字段名	string	`file`
`chunkSize`	设置每个文件分片大小	number	`1 * 1024 * 1024`
`multiple`	是否支持多选文件	boolean	`false`
`accept`	接受上传的文件类型	string	--
`autoUpload`	是否在选取文件后立即进行上传	boolean	`true`
`withCredentials`	支持发送 cookie 凭证信息	boolean	`false`
`headers`	设置上传的请求头部	object	--
`timeout`	设置超时时间	number	`0`
`httpRequest`	覆盖默认的上传行为，可以自定义上传的实现	function	--
`onChange`	选择文件后钩子	function(fileData[])	--
`onBeforeUpload`	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise.resolve(false)，则停止上传	function(fileData)	--
`onBeforeSliceFileUpload`	上传分片文件之前的钩子，参数为上传的分片文件，若返回 false 或者返回 Promise.resolve(false)，则停止上传（表示该分片文件已上传成过，无需再上传）	function(fileData)	--
`onProgress`	文件上传时的钩子	function(progressData)	--
`onSuccess`	单个文件上传成功时的钩子（表示该文件的所有分片文件已全部上传成功）	function(response[], fileData, file)	--
`onComplete`	所有文件上传成功时的钩子（表示所有文件的所有分片文件已全部上传成功）	function(responseList[][], fileData[], file[])	--
`onError`	分片文件上传失败时的钩子	function(err, sliceFile, file)	--
`isLocalRecord`	是否开启本地上传记录，开启后每上传完一个分片文件时，会在 `localStorage` 中记录，直到当前文件的所有分片文件全部上传完毕，删除当前记录	boolean	false
`localRecordTime`	开启本地上传记录后，设置保存每个文件的记录时长为多少天	number	15 天
`onLocalRecord`	开启本地上传记录后，当上传文件的分片文件时，命中本地上传记录，不需要再上传前调用该钩子，若返回 false 或者返回 Promise.resolve(false)，则停止上传（表示该分片文件已上传成过，无需再上传）	function(fileData)	--
`isAddUp`	是否开启叠加文件，当设置 `config.autoUpload` 为 `false` 并开启此选项时，选择的文件会进行叠加，并在 `onChange` 钩子中返回所有叠加文件（如果选择文件的文件名一样时，会保留第一个选择的文件，因为要以文件名和内容生成唯一的 md5 值）	boolean	false

requestData: object （上传分片文件时，默认请求入参）

字段	说明	类型
`name`	文件名称	string
`size`	文件大小	number
`hash`	文件生成唯一的 md5 值	string
`totalCount`	文件可分片个数	number
`index`	当前上传分片文件的索引值	number
`file`	当前上传的分片文件，可通过 `config.name` 设置上传的文件字段名	file / blob
`currentSize`	当前上传的分片文件大小	number
`currentHash`	当前上传的分片文件生成唯一的 md5 值	string

钩子参数说明

fileData: object

name	说明	类型
`name`	文件名称	string
`size`	文件大小	number
`file`	上传文件	file
`hash`	文件生成唯一的 md5 值	string
`totalCount`	文件可分片个数	number
`index`	当前上传分片文件的索引值	number
`currentFile`	当前上传的分片文件	file / blob
`currentSize`	当前上传的分片文件大小	number
`currentHash`	当前上传的分片文件生成唯一的 md5 值	string

import upload from 'big-upload'

upload({
  el: '#el'
  action: '/upload',
  onBeforeUpload(fileData) {
    console.log(fileData)
  }
})

/* `xx?` 参数是针对分片文件内容，所以在 `onChange`、`onBeforeUpload` 钩子中不会有此参数
fileData: {
  name: string,
  size: number,
  file: file,
  hash: string,
  totalCount: number,
  index?: number,
  currentFile?: file / blob,
  currentSize?: number,
  currentHash?: string
}
*/

progressData: object

name	说明	类型
`name`	文件名称	string
`size`	文件大小	number
`file`	上传文件	file
`hash`	文件生成唯一的 md5 值	string
`totalCount`	文件可分片个数	number
`index`	当前上传分片文件的索引值	number
`currentFile`	当前上传的分片文件	file / blob
`currentSize`	当前上传的分片文件大小	number
`currentHash`	当前上传的分片文件生成唯一的 md5 值	string
`loaded`	当前上传的分片文件，已上传的大小	number
`total`	当前上传的分片文件，需要上传的总共大小	number
`percent`	文件的上传进度	number

import upload from 'big-upload'

upload({
  el: '#el'
  action: '/upload',
  onProgress(progressData) {
    console.log(progressData)
  }
})

/*
progressData: {
  name: string,
  size: number,
  file: file,
  hash: string,
  totalCount: number,
  index: number,
  currentFile: file / blob,
  currentSize: number,
  currentHash: string,
  loaded: number,
  total: number,
  percent: number
}
*/

response: object

name	说明	类型
`data`	接口返回的响应数据	object / any
`status`	响应状态码	number
`statusText`	响应状态文字	string
`headers`	响应头	object
`config`	传入的 `config` 配置	object
`request`	XMLHttpRequest 请求	object

import upload from 'big-upload'

upload({
  el: '#el'
  action: '/upload',
  onSuccess(response, fileData, file) {
    console.log(response)
  }
})

/* 返回多个分片文件的响应报文集合(分片文件的上传个数是根据上传文件的大小，和设置 `config.chunkSize` 的大小计算而得出结果)
response: [
  {
    data: object / any,
    status: number,
    statusText: string,
    headers: object,
    config: object,
    request: object
  },
  ...
]
*/

Methods

方法	说明	参数
`submit`	上传已选中的文件	--
`abort`	取消文件上传请求	(val: 可以是 file 文件，或者是 hash 文件生成唯一的 md5 值)
`remove`	删除已选中的文件	(val: 可以是 file 文件，或者是 hash 文件生成唯一的 md5 值)
`disabled`	是否禁用	(val?: 不传值为禁用；传 true 为禁用；传 false 为不禁用)

import upload from 'big-upload'

let fileDataList

const ul = upload({
  el: '#el',
  action: '/upload',
  autoUpload: false,
  onChange(fileData) {
    fileDataList = fileData
  }
})

document.querySelector('#btnSubmit').onclick = () => {
  ul.submit()
}

document.querySelector('#btnAbort').onclick = () => {
  if(fileDataList && fileDataList.length) {
    ul.abort(fileDataList[0].hash)
    fileDataList.shift()
  }
}

document.querySelector('#btnRemove').onclick = () => {
  if(fileDataList && fileDataList.length) {
    ul.remove(fileDataList[0].hash)
    fileDataList.shift()
  }
}

document.querySelector('#btnDisabled').onclick = () => {
  ul.disabled()
}

zzongxueyan / big-upload Goto Github PK

big-upload's Introduction

big-upload

安装

使用

API

config 配置

requestData: object （上传分片文件时，默认请求入参）

钩子参数说明

fileData: object

progressData: object

response: object

Methods

big-upload's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent