vue3 elementui 上传图片查看缩略图

如图：点击放大镜预览查看图片

image.png image.png

elementui用到的事件：

image.png

vue文件:

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible" style="width:50%">
      <img style="width:100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,nextTick } from 'vue';
const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const handlePictureCardPreview = (file) => {
  nextTick(()=>{
    dialogVisible.value = true;
    dialogImageUrl.value = file.url;
    // file.url : blob:http://localhost:3000/6a2ddf64-b154-476e-933c-338128bcd312
  })
}

</script>