我们都知道  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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐