YbFilesSelect 文件选择器
在el-upload基础上封装成一个 v-model 形式的选择文件的组件，可以直接用于表单当中，选择文件后不自动上传。
# 基本使用
默认使用的 el-upload 属性有：
- drag:true
- multiple:true
- accept:'.xlsx,.xls,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
- 'auto-upload': false
- limit:1
将上传文件拖到此处，或点击选择
<template>
<yb-files-select v-model="value" :limit="10" />
</template>
<script>
export default {
data() {
return {
value: null,
};
},
watch: {
value: function () {
console.log(this.value);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
显示 复制 复制
# 回显值
选择文件后得到的 value 是 File (opens new window)对象的数组，上传到服务端后，返显组件值可以是 object[]
将上传文件拖到此处，或点击选择
- food.jpeg 按 delete 键可删除
- food2.jpeg 按 delete 键可删除
<template>
<yb-files-select v-model="value" :limit="10" accept="image/*" />
</template>
<script>
export default {
data() {
return {
value: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
显示 复制 复制
# 照片墙
使用 el-upload 的 list-type 属性来设置文件列表的样式。
food.jpeg
按 delete 键可删除- food2.jpeg
按 delete 键可删除
<template>
<yb-files-select
list-type="picture-card"
:drag="false"
v-model="value"
:limit="10"
accept="image/*"
drag-message="99999"
>
</yb-files-select>
</template>
<script>
export default {
data() {
return {
value: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
};
},
};
</script>
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
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
显示 复制 复制
# 在表单中使用
在 yb-form 中使用很方便
<template>
<div>
<yb-form
ref="form"
:formItems="formItems"
:model="formModel"
label-width="100px"
@submit.native.prevent="onSubmit"
>
<template v-slot:formItems="formItem">
<el-input
v-model="formModel[formItem.prop]"
clearable
></el-input>
</template>
<template v-slot:excelFiles="formItem">
<yb-files-select
v-model="formModel[formItem.prop]"
:limit="10"
/>
</template>
<template v-slot:buttons="formItem">
<el-button type="primary" native-type="submit">提交</el-button>
<el-button>取消</el-button>
</template>
</yb-form>
</div>
</template>
<script>
export default {
data() {
const formItems = [
{
label: '标题',
prop: 'title',
rules: [
{
required: true,
message: '请输入',
trigger: 'blur',
},
],
defaultValue: '',
},
{
label: 'excel文件',
prop: 'excelFiles',
rules: [
{
required: true,
message: '请选择excel文件',
trigger: 'change',
},
],
},
{
label: '',
prop: 'buttons',
},
];
const formModel = formItems.reduce((tol, item) => {
return {
...tol,
[item.prop]:
typeof item.defaultValue !== 'undefined'
? item.defaultValue
: null,
};
}, {});
return {
formItems,
formModel,
};
},
methods: {
onSubmit() {
this.$refs['form']
.getForm()
.validate()
.then(() => {
const values = { ...this.formModel };
const formData = new FormData();
Object.keys(values).forEach((key) => {
if (
Array.isArray(values[key]) &&
Object.prototype.toString.call(
values[key][0]
) === '[object File]'
) {
values[key].forEach((item) => {
formData.append(key, item);
});
delete values[key];
}
});
console.log('验证成功', values, formData);
})
.catch((err, errFields) => {
console.log('验证失败', err, errFields);
});
},
},
};
</script>
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
显示 复制 复制
# 选择图片转成 base64 提交
在 yb-form 中与其他字段一起提交
<template>
<div>
<yb-form
ref="form"
:formItems="formItems"
:model="formModel"
label-width="100px"
@submit.native.prevent="onSubmit"
>
<template v-slot:formItems="formItem">
<el-input
v-model="formModel[formItem.prop]"
clearable
></el-input>
</template>
<template v-slot:fileImages="formItem">
<yb-files-select
list-type="picture-card"
:drag="false"
v-model="formModel[formItem.prop]"
:limit="10"
accept="image/*"
>
</yb-files-select>
</template>
<template v-slot:buttons="formItem">
<el-button type="primary" native-type="submit">提交</el-button>
<el-button>取消</el-button>
</template>
</yb-form>
</div>
</template>
<script>
export default {
data() {
const formItems = [
{
label: '标题',
prop: 'title',
rules: [
{
required: true,
message: '请输入',
trigger: 'blur',
},
],
},
{
label: 'base64图片',
prop: 'fileImages',
rules: [
{
required: true,
message: '请选择图片',
trigger: 'change',
},
],
defaultValue: [
{
name: '测试图片',
url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANkAAADrCAYAAADkDDPQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiMzZhNmViYS0yM2Y4LTdiNDMtYmZlYS0zMGYzNTMxNjZhODgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODkzQTI2QjI4NDBDMTFFQ0I2QkRBQTFFNUIwNTA5N0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODkzQTI2QjE4NDBDMTFFQ0I2QkRBQTFFNUIwNTA5N0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N2UyODk4NjktMWM1OC00YjgyLTliOWMtYzE1MGJiN2RjYmM2IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NDcyNTg2ZGMtY2M2Yy0xMTdmLTkzOGEt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',
},
],
},
{
label: '',
prop: 'buttons',
},
];
const formModel = formItems.reduce((tol, item) => {
return {
...tol,
[item.prop]:
typeof item.defaultValue !== 'undefined'
? item.defaultValue
: null,
};
}, {});
return {
formItems,
formModel,
};
},
methods: {
onSubmit() {
this.$refs['form']
.getForm()
.validate()
.then(() => {
const values = { ...this.formModel };
// fileImages 可能是[{name:'aaa.png',url:'base64'},file,file]
const allP = Promise.all(
values.fileImages.map((file) => {
if (
Object.prototype.toString.call(file) ===
'[object File]'
) {
return new Promise((resolve, reject) => {
const oFileReader = new FileReader();
oFileReader.readAsDataURL(file);
oFileReader.onload = (e) => {
const base64 = e.target.result;
resolve(base64);
};
oFileReader.onerror = reject;
});
}
return Promise.resolve(file.url);
})
);
allP.then((fileArr) => {
values.fileImages = fileArr;
console.log('验证成功', values);
});
})
.catch((err, errFields) => {
console.log('验证失败', err, errFields);
});
},
},
};
</script>
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
显示 复制 复制
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | object[] / file[] | -- | -- |
| limit | 最大选择数量 | number | -- | 1 |
| dragMessage | 可拖动文件到的位置的文字描述 ，因为组件默认是开启 drag 属性的 | string | -- | 将上传文件拖到此处，或 |
| ... | 其他属性同 el-upload (opens new window) | -- | -- | -- |
上次更新: 2023/08/18, 17:53:01