el-upload图片预览

### 使用 `el-upload` 组件实现图片预览功能

为了实现图片预览功能，可以利用 `el-upload` 的属性和事件来完成。具体来说，可以通过设置 `list-type="picture-card"` 来启用卡片形式的文件列表显示模式，并结合自定义的预览逻辑。

下面是一个完整的示例代码：

<template>
  <div>
    <!-- 文件上传控件 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList">
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 预览对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

在这个例子中，当点击已上传的图片时会触发 `handlePictureCardPreview` 方法，该方法负责更新要显示的大图 URL 并打开弹窗[^1]。

对于只允许上传单张图片的情况，在每次成功上传新图片后应当清空之前的数据，包括调用 `clearFiles()` 清除文件队列以及重置用于存储大图链接的变量 `urlList` 数组。