# Upload
上传文件，上传接口名是固定，由基础包提供，需要外部传入接口地址与 token
案例
import { defineComponent } from "vue";
import { Upload } from "sl-vue2-template";
export default defineComponent({
data() {
return {
files: [
{
name: "测试.docx",
path: "group1/M00/00/1B/wKgS5mQ3xWmAc3CqABWK4LATEOM40.docx",
},
],
files2: [
{
name: "测试.docx",
path: "group1/M00/00/1B/wKgS5mQ3xWmAc3CqABWK4LATEOM40.docx",
},
],
};
},
render() {
return (
<div>
<Upload
files={this.files}
action={actions}
handlerChange={(files) => {
this.files = files;
}}
>
上传文件
</Upload>
<br />
<br />
<Upload
action={actions}
handlerChange={(files) => {
this.files = files;
}}
>
上传文件
</Upload>
<br />
<br />
<Upload
multiple
files={this.files2}
action={actions}
handlerChange={(files) => {
this.files2 = files;
}}
>
上传多文件
</Upload>
{/* <Upload color="black" disabled>
上传文件
</Upload>
<Upload plain>上传文件</Upload>
<Upload color="black" plain>
上传文件
</Upload> */}
<br />
<br />
<Upload
slice
action={actions}
handlerChange={(files) => {
this.files = files;
}}
color="blue"
>
分片上传文件
</Upload>
</div>
);
},
});
const actions = {
token:
"Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjFfMzNlZjE1MGItY2UzZS00NzZlLTk2MzEtYmJhOTdiNDk1ZDlmIn0.j-KRyLngu50rgFvDgm4FxMClLsZuNBnLZO3kRoGJBlYMTEWaHK9FOoyXs4aypmOXjc3Vhb6O3G6EjDLZXQoHSQ",
url: "http://192.168.0.105:8090",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| action | 接口需要的 token 与 url | {token: string;url: string} | 是 | -- | -- |
| files | 上传的文件数组 | { name: string; path: string}[] | 否 | -- | -- |
| limit | 上传文件大小, 分片模式下为分片大小，不分配模式为限制文件大小 | Number | 否 | -- | -- |
| slice | 是否支持分片 | Boolean | 否 | -- | -- |
| accept | 文件上传控件中预期文件类型的提示 | String | 否 | -- | -- |
| multiple | 允许用户选择多个文件 | Boolean | 否 | false | -- |
| color | 按钮背景 | 支持的颜色 | 否 | 'primary-color' | -- |
| plain | 空心 | Boolean | 否 | false | -- |
| disabled | 禁用 | Boolean | 否 | false | -- |
| warp | 换行 | Boolean | 否 | false | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerChange | 点击的回调 | (arg：{ name: string; path: string}[]) => void | true | -- |