@58fe/p5
Version:
pc端vue组件
77 lines (56 loc) • 2.49 kB
Markdown
<script>
module.exports = {
data() {
return{
withCredentails: true
}
}
}
</script>
## Upload 上传
### 引入
```javascript
import { upload } from '@58fe/p5';
```
### 基本用法
:::demo
```html
<upload action="http://apimanage.58corp.com/mock/5d11ba6dc8659502950970be"></upload>
```
:::
### 多文件上传
:::demo
```html
<upload action="http://apimanage.58corp.com/mock/5d11ba6dc8659502950970be" :with-credentails=withCredentails :multiple=true></upload>
```
:::
### 拖拽上传
拖拽上传默认支持多文件形式
:::demo
```html
<upload action="http://apimanage.58corp.com/mock/5d11ba6dc8659502950970be" uploadtype='drop'></upload>
```
:::
### 自定义展示上传列表及进度条
`showUploadList`属性定义是否展示上传文件列表
:::demo
```html
<upload action="http://apimanage.58corp.com/mock/5d11ba6dc8659502950970be" :with-credentails=withCredentails :multiple=true :show-upload-list=true></upload>
```
:::
### 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| action | 上传地址 | String | 必填项 | '' |
| headers | 自定义header | Object | —— | --|
| uploadtype | 上传样式类型 | String | select/drop | select |
| withCredentails | 是否开启缓存 | Boolean | —— | false |
| data | 上传文件时所带数据 | Object | —— | —— |
| maxSize | 上传文件的大小限制,单位kb | Number | —— | —— |
| multiple | 是否要多文件传输 | Boolean | true/false | false |
| showUploadList | 是否展示上传列表 | Boolean | true/false | true |
| onProgress | 上传进度回调函数,返回参数(e, _file, fileList) | Function | —— | —— |
| onSuccess | 上传成功回调函数,返回参数(res, _file, fileList) | Function | —— | —— |
| onError | 上传失败回调函数,返回参数(err, response, file) | Function | —— | —— |
| onRemove | 删除掉某一上传文件的回调函数,返回参数(file, fileList) | Function | —— | —— |
| onExceededSize | 超出限制大小回调函数,返回参数(file, fileList) | Function | —— | —— |