53 lines
4.3 KiB
Markdown
53 lines
4.3 KiB
Markdown
### 使用说明
|
||
|
||
拷贝该组件到 components 目录下之后
|
||
在 script 中引用组件
|
||
|
||
```js
|
||
import hjbUpload from "@/components/hjb-upload/hjb-upload.vue";
|
||
export default {
|
||
components: { hjbUpload },
|
||
};
|
||
```
|
||
|
||
在 template 中使用组件：
|
||
|
||
```html
|
||
<hjb-upload
|
||
ref="upload"
|
||
name="file"
|
||
action="/upload"
|
||
:headers="headers"
|
||
:limit="10"
|
||
:file-list="fileList"
|
||
:on-change="uploadChange"
|
||
>
|
||
<!-- 自定义渲染可选 -->
|
||
<image slot-scope="{item,index}" :src="item.url" />
|
||
</hjb-upload>
|
||
```
|
||
|
||
### 组件参数说明
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
| ------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ |
|
||
| action | 必选参数，上传的地址 | string | — |
|
||
| headers | 设置上传的请求头部 | object | — |
|
||
| multiple | 是否支持多选文件 | boolean | false |
|
||
| formData | 上传时附带的额外参数 | object | — |
|
||
| name | 上传的文件字段名 | string | file |
|
||
| fileType | 接受上传的文件类型,例如: ['png'] | array | [] |
|
||
| on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — |
|
||
| on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — |
|
||
| on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — |
|
||
| on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — |
|
||
| on-progress | 文件上传时的钩子 | function(event, file, fileList) | — |
|
||
| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — |
|
||
| before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — |
|
||
| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 | function(file, fileList) | — |
|
||
| auto-upload | 是否在选取文件后立即进行上传 | boolean | true |
|
||
| file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | [] |
|
||
| http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — |
|
||
| disabled | 是否禁用 | boolean | false |
|
||
| limit | 最大允许上传个数 | number | 10 |
|