基于element-ui 使用 upload 预览图片(含删除功能)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
我们都知道 upload 是上传文件的组件,但同时可以对上传文件进行预览,这里我才用 upload 预览图片。
首先介绍的是 list-type:文件列表的类型,可选值:text | picture | picture-card ,默认值为 text.
file-list:上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
on-preview:点击文件列表中已上传的文件时的钩子,可以点击文件信息。
案例:
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:file-list="imgs"
:on-remove="handleRemove"
:before-remove="beforeRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" fit="contain" :src="dialogImageUrl" alt="">
</el-dialog>
点击图片是上搜索的图标,调用on-preview 方法,获取到图片信息,将图片的URL 赋值到el-dialog 弹框中。
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
有时候会存在多次复用上传组件的需求, 例如循环表单,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢?
我采用的方法就是将 upload 组件的相关信息都放入到子组件中,通过父子组件间的传值,这样就能达到在循环表单中,多次复用组件。
父组件中如何使用呢?
<upload-preview :imgs="form.avatar" @delete="delAvatar" :delIcon="true" v-if="form.avatar.length"></upload-preview>
引入子组件:
import uploadPreview from '@/components/upload/upload';
components: {
uploadPreview
},
在预览图片时,我们还存在是否可以删除该图片的场景,我们也可以通过使用 upload 组件进行操作。
删除图片:(这里的操作就是将图片从 图片 URL 数组中移除操作)
delAvatar (val) {
removeOper(this.form.avatar, val.url, 'url')
},
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献31条内容
所有评论(0)