基于element-ui 使用 upload 预览图片（含删除功能）

我们都知道  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')
},

详细内容