shou-file-uploader
Version:
a file uploader component
97 lines (59 loc) • 1.79 kB
Markdown
```js
//install dependencies
npm install shou-file-uploader
//main.js
import UP from 'shou-file-uploader'
Vue.use(UP);
//xxx.vue
//简单例子 simple demo
<uploader>
<uploader-btn></uploader-btn>
</uploader>
//完整例子 complete demo
<uploader :target="'http://127.0.0.1'"
:piece="1024 * 1024"
:header="{'a':123}" state="{md5: '文件md5计算中',up: '上传中',pause: '暂停',error: '上传出错',success: '上传完成'}"
:check-chunk-uploaded-by-response="function(chunk,responseData) {return true || false;}"
:panel-show="true" :circle-mini-mize="true"
:file-added="function(file) {}"
:file-parameter-name="'file'"
:file-progress="(file,chunk,event,percent)=>{}"
:file-error="(file, chunk, msg)=>{}"
:file-success="(file,responseData)=>{}">
<uploader-btn :folder="true" :multiple="true" :attrs="['*.json']"></uploader-btn>
</uploader>
```
> target
后端服务器地址
> piece
分片大小,单位kb
>header
请求头
>checkChunkUploadedByResponse - 必须
检查需要跳过的分片
>state
上传状态
>panelShow
是否显示上传面板
>circleMiniMize
最小化状态下改为圆形，占用空间更小
>fileAdded
文件添加钩子, 参数(文件)
> fileParameterName
上传文件时的参数名，默认file
> fileProgress
上传进度,参数(文件,当前分片,上传事件,百分比)
> fileError
文件上传出错,参数(文件,当前分片,错误信息)
> fileSuccess
上传完成,参数(文件,后端返回信息)
> folder
上传文件夹
>multiple
多文件上传
> attrs
限制选择文件类型