plduoa

plduoa 是一个原生 JavaScript 编写的轻量级文件上传库，依赖 HTML5 的 File API。

目前暂时不支持大文件分片上传和拖拽上传功能。

Install

# npm
npm install plduoa

# yarn 
yarn add plduoa

Usage

支持多种引用方式：

• [x] 支持 cjs
• [x] 支持 import
• [x] 支持 esm

import Uploader from 'plduoa'

let upload = new Uploader({
    dom: document.querySelector('.uploader-btn'),
    action: 'http://localhost:8000/upload'
})

支持事件机制

upload.on('fileAdded', (file) => {
    console.log(file)
})

upload.on('filesSubmitted', (files) => {
    console.log(files)
})

配置

| 字段名 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------ | ------- | ------ | | dom | 用来触发选择文件的资源弹窗的 dom 节点 | Element | [] | | multiple | 支持多文件上传 | boolean | false | | accept | 限制允许选择的文件类型，更多格式见“常用 MIME 类型”表格 | string | '' | | action | 文件上传的接口 | string | '' | | name | 文件上传时，formData中表示二进制资源的字段名 | string | file | | limit | 在 multiple = true 时，限制选择的文件数量，注：后选择的文件会替换掉先前选择的 | number | 1 | | withCredentials | 允许在 action 是跨域场景下，携带cookie发送请求 | boolean | false | | method | 请求的方式，注：不支持 GET ，目前只支持 POST、PUT、OPTIONS | string | POST | | data | 发送请求时，携带的一些其他参数 | Object | {} | | headers | 发送请求时，携带的一些其他请求头部 | Object | {} | | attributes | 可以在创建的 <input type="file"> dom上添加一些自定义属性，如： | Object | {} |

方法

| 方法名 | 说明 | 可接收参数 | 返回值 | | -------- | ---------------------------- | ------------------------------- | ------ | | upload | 将已选择的文件全部进行上传 | - | - | | resume | 上次上传失败的文件再一次上传 | - | - | | abort | 取消正在上传中的所有文件 | - | - | | cancel | 将已选择的文件全部删除 | - | - | | addFile | 手动添加单个文件 | (files: File, event: Event) | - | | addFiles | 手动添加多个文件 | (files: FileList, event: Event) | - | | remove | 移除指定文件 | file | - |

属性

| 名称 | 说明 | 返回值 | | -------- | -------------------------- | ------ | | progress | 全部文件上传的总进度平均值 | 0~1 | | size | 全部文件总的大小，单位 b | > 0 |

事件

| 事件名称 | 说明 | 参数 | 返回值 | | -------------- | ---------------------------------------- | ------------------- | ------ | | progress | 每当任意文件的上传进度发变化时，就会触发 | - | - | | uploadStart | 当文件开始上传时触发 | - | - | | resume | 将上传失败的文件进行再一次上传时触发 | - | - | | fileAdded | 每个文件添加到队列中时会触发 | (uploadFile, event) | - | | filesSubmitted | 全部文件添加到队列中时会触发 | (files, event) | | | fileRemoved | 移除文件时触发 | (file) | |

常用 MIME 类型

<!--只支持图片格式的文件-->
<input type="file" id="imageFile" accept="image/*">

| 文件类型 | accept属性值 | 类型 | | :------- | -------------------------------------------- | ------------------------------------ | | *.3gpp | audio/3gpp, video/3gpp | 3GPP Audio/Video | | *.ac3 | audio/ac3 | AC3 Audio | | *.asf | allpication/vnd.ms-asf | Advanced Streaming Format | | *.au | audio/basic | AU Audio | | *.css | text/css | Cascading Style Sheets | | *.csv | text/csv | Comma Separated Values | | *.doc | application/msword | MS Word Document | | *.dot | application/msword | MS Word Template | | *.dtd | application/xml-dtd | Document Type Definition | | *.dwg | image/vnd.dwg | AutoCAD Drawing Database | | *.dxf | image/vnd.dxf | AutoCAD Drawing Interchange Format | | *.gif | image/gif | Graphic Interchange Format | | *.htm | text/html | HyperText Markup Language | | *.html | text/html | HyperText Markup Language | | *.jp2 | image/jp2 | JPEG-2000 | | *.jpe | image/jpeg | JPEG | | *.jpeg | image/jpeg | JPEG | | *.jpg | image/jpeg | JPEG | | *.js | text/javascript, application/javascript | JavaScript | | *.json | application/json | JavaScript Object Notation | | *.mp2 | audio/mpeg, video/mpeg | MPEG Audio/Video Stream, Layer II | | *.mp3 | audio/mpeg | MPEG Audio Stream, Layer III | | *.mp4 | audio/mp4, video/mp4 | MPEG-4 Audio/Video | | *.mpeg | video/mpeg | MPEG Video Stream, Layer II | | *.mpg | video/mpeg | MPEG Video Stream, Layer II | | *.mpp | application/vnd.ms-project | MS Project Project | | *.ogg | application/ogg, audio/ogg | Ogg Vorbis | | *.pdf | application/pdf | Portable Document Format | | *.png | image/png | Portable Network Graphics | | *.pot | application/vnd.ms-powerpoint | MS PowerPoint Template | | *.pps | application/vnd.ms-powerpoint | MS PowerPoint Slideshow | | *.ppt | application/vnd.ms-powerpoint | MS PowerPoint Presentation | | *.rtf | application/rtf, text/rtf | Rich Text Format | | *.svf | image/vnd.svf | Simple Vector Format | | *.tif | image/tiff | Tagged Image Format File | | *.tiff | image/tiff | Tagged Image Format File | | *.txt | text/plain | Plain Text | | *.wdb | application/vnd.ms-works | MS Works Database | | *.wps | application/vnd.ms-works | Works Text Document | | *.xhtml | application/xhtml+xml | Extensible HyperText Markup Language | | *.xlc | application/vnd.ms-excel | MS Excel Chart | | *.xlm | application/vnd.ms-excel | MS Excel Macro | | *.xls | application/vnd.ms-excel | MS Excel Spreadsheet | | *.xlt | application/vnd.ms-excel | MS Excel Template | | *.xlw | application/vnd.ms-excel | MS Excel Workspace | | *.xml | text/xml, application/xml | Extensible Markup Language | | *.zip | application/zip application/x-zip-compressed | Compressed Archive |