可以
使用 Element UI 的
Upload 组件来
上传图片，然后在 S
elect
组件中选择已
上传的图片。具体步骤如下：
1. 引入
Element UI 和
Vue.js：
```html
<!-- 引入
Element UI 样式 -->
<link r
el="stylesheet" href="https://unpkg.com/
element-
ui/lib/theme-chalk/index.css">
<!-- 引入
Vue.js -->
<script src="https://cdn.jsd
elivr.net/npm/
vue/dist/
vue.js"></script>
<!-- 引入
Element UI 组件库 -->
<script src="https://unpkg.com/
element-
ui/lib/index.js"></script>
```
2. 创建一个
Vue 实例，并在模板
中添加 S
elect
组件和
Upload 组件：
```html
<div id="app">
<
el-s
elect v-mod
el="imageUrl" placeholder="请选择图片">
<
el-option v-for="item in options" :key="item.value" :lab
el="item.lab
el" :value="item.value">
<img :src="item.value" alt="" style="width: 50px; height: 50px;">
</
el-option>
</
el-s
elect>
<
el-
upload
class="
upload-demo"
action="/
upload"
:on-success="handleSuccess"
:show-file-list="false"
:before-
upload="before
Upload">
<
el-button size="small" type="primary">点击
上传</
el-button>
</
el-
upload>
</div>
```
3. 在
Vue 实例
中定义数据和方法：
```js
new
Vue({
el: '#app',
data() {
return {
options: [], // S
elect
组件的选项
imageUrl: '' // S
elect
组件选
中的图片地址
}
},
methods: {
//
上传成功后将图片地址添加到 S
elect
组件的选项
中
handleSuccess(response, file, fil
eList) {
this.options.push({
lab
el: file.name,
value: response.url
})
},
//
上传前校验文件类型和大小
before
Upload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!(isJPG || isPNG)) {
this.$message.error('
上传图片只能是 JPG 或 PNG 格式!')
}
if (!isLt2M) {
this.$message.error('
上传图片大小不能超过 2MB!')
}
return isJPG || isPNG && isLt2M
}
}
})
```
4. 在 handleSuccess 方法
中将
上传成功的图片地址添加到 S
elect
组件的选项
中，然后在模板
中使用 img 标签显示图片即可。
这样就实现了
使用 S
elect
组件选择已
上传的图片并在 S
elect 框
中回显图片的功能。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2100
