vue3+elementPlus <script setup>ts 上传可预览图片支持预览删除
时间: 2024-10-09 10:16:31 浏览: 21
在 Vue3 中结合 Element Plus 使用 `<script setup>` 语法,你可以创建一个支持文件上传并实时预览图片的功能。Element Plus 提供了 `ElUpload` 组件,可以方便地处理文件上传。下面是一个简单的示例,展示如何设置图片上传、预览以及提供删除功能:
```html
<template>
<el-upload
:action="uploadUrl"
list-type="picture-card"
:on-success="handleSuccess"
:before-remove="beforeRemove"
:file-list="previewFiles"
>
<el-button slot="trigger">选择图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg格式的图片</div>
</el-upload>
<el-image v-for="(item, index) in previewFiles" :key="index" :src="item.url" :preview-src-list="item.urls"></el-image>
</template>
<script lang="ts">
import { onMounted, ref } from 'vue';
const uploadUrl = ref('');
const previewFiles = ref([]); // 存储预览图片信息
// 成功上传回调
async function handleSuccess(response: any, file: File) {
const url = await uploadImage(file);
previewFiles.value.push({ url, urls: [url] });
}
// 图片上传到服务器的函数
async function uploadImage(file: File): Promise<string> {
// 实现图片上传逻辑,这里只是一个占位符
return 'http://example.com/upload?filename=' + file.name;
}
// 删除文件前的确认提示
function beforeRemove(file: File): boolean {
return confirm(`确定要删除 ${file.name}吗?`);
}
</script>
```
在这个例子中:
1. `el-upload` 用于文件上传,`list-type="picture-card"` 表示显示图片卡片列表样式。
2. `handleSuccess` 函数接收服务器返回的响应和上传的文件,生成一个新的预览文件信息并添加到 `previewFiles` 数组。
3. `uploadImage` 是实际上传图片到服务器的异步函数,你需要根据实际需求编写这部分逻辑。
4. `beforeRemove` 会在用户点击删除按钮时触发,询问是否真的要删除。