f92fd6ac
 wuxw
开发我的小区下的功能
|
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
# UploadImageUrl 组件文档
## 组件概述
`UploadImageUrl` 是一个图片上传组件，支持上传本地图片并显示预览，同时可以删除已上传的图片。
## 基本用法
```vue
<template>
<upload-image-url
:image-count="3"
@notifyUploadCoverImage="handleImageUpload"
/>
</template>
<script>
import UploadImageUrl from '@/components/staff/UploadImageUrl.vue'
export default {
components: {
UploadImageUrl
},
methods: {
handleImageUpload(urls) {
// 处理上传后的图片URL数组
console.log(urls)
}
}
}
</script>
```
## Props
| 参数名 | 说明 | 类型 | 默认值 |
|------------|--------------------|----------|--------|
| imageCount | 允许上传的最大图片数量 | Number | 1 |
## Events
| 事件名 | 说明 | 回调参数 |
|----------------------|--------------------------|-----------------------|
| notifyUploadCoverImage | 图片上传或删除时触发 | 当前所有图片的URL数组 |
## 方法
通过 ref 可以调用组件的方法：
```vue
<template>
<upload-image-url ref="uploader" />
</template>
<script>
export default {
methods: {
clearImages() {
this.$refs.uploader.clearImages()
},
setImages(images) {
this.$refs.uploader.setImages(images)
}
}
}
</script>
```
| 方法名 | 说明 | 参数 |
|-------------|--------------------------|--------------------------|
| clearImages | 清空所有已上传的图片 | 无 |
| setImages | 设置要显示的图片 | images: Array<string> (图片URL数组) |
## 样式定制
组件使用 SCSS 编写样式，可以通过以下类名进行样式覆盖：
- `.upload-image-container` - 整个上传容器
- `.image-item` - 单个图片项容器
- `.delete-icon` - 删除按钮
- `.upload-button` - 上传按钮
## 注意事项
1. 组件限制上传图片大小不超过 2MB
2. 上传的图片会自动转换为 base64 格式进行预览
3. 组件内部会维护两个数组：
- `photos`: 用于预览的图片数组（包含 base64 数据）
- `photosUrl`: 上传后的图片 URL 数组
4. 当图片 URL 以 `http` 开头时，组件会直接使用该 URL 进行显示
5. 当图片数据包含 `base64,` 时，组件会将其视为 base64 数据进行显示
## 示例
### 基本使用
```vue
<upload-image-url />
```
### 限制上传数量
```vue
<upload-image-url :image-count="5" />
```
### 获取上传结果
```vue
<template>
<upload-image-url @notifyUploadCoverImage="handleUpload" />
</template>
<script>
export default {
methods: {
handleUpload(urls) {
console.log('上传的图片URL:', urls)
// 可以将这些URL保存到表单数据中
}
}
}
</script>
```
### 设置初始图片
```vue
<template>
<upload-image-url ref="uploader" />
</template>
<script>
export default {
mounted() {
// 设置初始图片
this.$refs.uploader.setImages([
'https://example.com/image1.jpg',
'https://example.com/image2.jpg'
])
}
}
</script>
```
### 清空图片
```vue
<template>
<upload-image-url ref="uploader" />
<button @click="clear">清空图片</button>
</template>
<script>
export default {
methods: {
clear() {
this.$refs.uploader.clearImages()
}
}
}
</script>
```
|
