可以使用
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="beforeUpload">
<
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
})
},
// 上传前校验文件类型和大小
beforeUpload(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 框中回显图片的功能。
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
