element-plus的文件上传组件el-upload

最新推荐文章于 2025-05-19 11:35:48 发布

forwardMyLife

最新推荐文章于 2025-05-19 11:35:48 发布

阅读量1.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： element-plus 文章标签： elementui

本文链接：https://blog.csdn.net/lucky_ly/article/details/140252685

el-upload组件支持多种风格，如文件列表，图片，图片卡片，支持多种事件，预览，删除，上传成功，上传中等钩子。
在这里插入图片描述

在这里插入图片描述
file-list：上传的文件集合，一定要用v-model:file-list进行双向绑定。
list-type:决定文件类型，filelist,picture,picture-card 3种

用法示例

vue代码

<script setup lang="ts">
import {
   
    onMounted, reactive, ref } from 'vue'
import type {
   
    FormInstance,FormRules,UploadUserFile  } from 'element-plus'

interface Good {
   
   
  
}

const goodForm=ref<Good>({
   
   
  
});



const fileList=ref<UploadUserFile[]>()

const picFileList=ref<UploadUserFile[]>()

const picCardFileList=ref<UploadUserFile[]>()

const previewDialogVisable=ref(false)
const previewPicUrl=ref()

const previewFunc = (uploadFile:UploadUserFile)=>{
   
   
    previewDialogVisable.value=true
    previewPicUrl.value=uploadFile.url