<el-upload>选择图片上传后不展示
时间: 2023-07-18 07:13:40 浏览: 46
在 `<el-upload>` 标签中,可以通过设置 `show-file-list` 属性来控制上传成功后是否展示已上传的文件列表。如果将 `show-file-list` 属性设置为 `false`,上传成功后就不会展示已上传的文件列表。例如:
```html
<el-upload
action="/upload"
:show-file-list="false"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button>上传文件</el-button>
</el-upload>
```
在上传成功后,可以通过 `handleSuccess` 方法中的参数 `response` 来获取上传成功后的响应结果,并根据需要进行处理。如果需要展示已上传的文件列表,可以在 `handleSuccess` 方法中将上传成功后的文件信息保存到数组中,然后在页面中展示该数组中的数据。
相关问题
el-upload 展示图片方式 fit
el-upload 组件可以用于上传图片,但是它本身并不提供图片展示的功能,需要结合其他组件来实现展示图片。展示图片的方式有很多种,其中一种方式是使用 CSS 的 `object-fit` 属性来控制图片的展示方式。
具体实现方法如下:
1. 在 el-upload 组件中设置 `show-file-list` 属性为 `false`,这样上传的图片不会自动展示在组件中。
2. 在页面中添加一个图片展示组件,比如 el-image。
3. 在上传成功的回调函数中,将上传的图片文件设置为 el-image 组件的 `src` 属性,同时设置 `fit` 属性为需要的展示方式,比如 `cover`、`contain` 等。
示例代码如下:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false"
:on-success="handleSuccess"
>
<el-button slot="trigger">上传图片</el-button>
</el-upload>
<el-image v-if="imageUrl" :src="imageUrl" :fit="fit" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: '',
fit: 'cover',
}
},
methods: {
handleSuccess(response) {
this.imageUrl = response.url
},
},
}
</script>
```
在上面的代码中,我们使用了 el-image 组件来展示上传的图片,同时根据需要设置了 `fit` 属性为 `cover`,表示将图片按比例缩放并裁剪,以填充容器。你也可以根据需要设置为其他的展示方式,比如 `contain`、`fill` 等。
<template slot="z2"> <ul v-if="!informationData.show" class="safety_list_1 safety_list_2"> <li @click="information"> <div class="left"> <img src="@/assets/img/手机账号-icon.png" alt="图片加载失败" /> <span>身份认证</span> </div> <div class="right"> <span>{{ userinfo.authStatus == 1 ? "已认证" : "去认证" }}</span> <img src="@/assets/img/棕色箭头-icon.png" alt="图片加载失败" /> </div> <div class="right" v-if="userinfo.authStatus == 1"> <span @click="showAuth" >查看实名</span> <img src="@/assets/img/棕色箭头-icon.png" alt="图片加载失败" /> </div> </li> <li> </li> </ul> <!-- 身份认证 --> <div v-else class="information"> <p>上传证件照片</p> <p>信息仅用于身份验证,保障您的信息安全</p> <div class="upload"> <van-uploader v-model="informationData.fileList1" multiple :max-count="1" > <div class="box"> <van-icon name="plus" /> <p>身份证正面</p> </div> </van-uploader> <van-uploader v-model="informationData.fileList2" multiple :max-count="1" > <div class="box"> <van-icon name="plus" /> <p>身份证反面</p> </div> </van-uploader> </div> <div class="btns"> <van-button :loading="loading3" @click="affirmInformation" >确认</van-button > <van-button @click="informationData.show = false">取消</van-button> </div> </div> </template> 我需要点击showAuth展示一个透明模态框 用来展示身份证照片
好的,你可以在 `showAuth` 函数中添加打开模态框的逻辑,比如使用 `element-ui` 中的 `Dialog` 组件:
```
<el-dialog :visible.sync="dialogVisible">
<img :src="idCardFront" alt="身份证正面照片" />
<img :src="idCardBack" alt="身份证反面照片" />
</el-dialog>
```
在 `showAuth` 函数中设置 `dialogVisible` 为 `true`,并将身份证正反面照片的 URL 赋值给 `idCardFront` 和 `idCardBack` 即可展示模态框。