当前位置: 首页 > news >正文

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

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=truepreviewPicUrl.value=uploadFile.url
}</script><template><el-form :model="goodForm" status-icon label-position="left" label-width="auto" ref="formRef"><el-form-item label="select file"><el-upload v-model:file-list="fileList" action="http://localhost:3000/upload"><template #trigger><el-button type="primary">select file</el-button></template></el-upload></el-form-item><el-form-item label="select pic file"><el-upload v-model:file-list="picFileList" list-type="picture" action="http://localhost:3000/upload"><template #trigger><el-button type="primary">select file</el-button></template></el-upload></el-form-item><el-form-item label="picture card file"><el-upload v-model:file-list="picCardFileList" action="http://localhost:3000/upload" list-type="picture-card" :on-preview="previewFunc"><template #trigger><el-button type="primary">select file</el-button></template></el-upload></el-form-item><el-dialog v-model="previewDialogVisable" ><img :src="previewPicUrl"  alt="preview image" w-full/></el-dialog></el-form></template><style scoped></style>

后端用node+ts

import express from 'express';
import multer from 'multer';
import path from 'path';
import cors from 'cors';// 初始化 express 应用
const app = express();app.use(cors())// 设置文件存储配置
const storage = multer.diskStorage({destination: (req, file, cb) => {cb(null, 'uploads/'); // 文件存储目录},filename: (req, file, cb) => {const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname)); // 文件名}
});const upload = multer({ storage: storage });// 创建文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {res.send({message: 'File uploaded successfully',file: req.file});
});app.use(express.static(path.join(__dirname, '../uploads')));// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

在这里插入图片描述

demo 地址
https://github.com/haozhi-ly/elment-plus-demo

https://element-plus.org/zh-CN/component/upload.html#%E5%B1%9E%E6%80%A7

http://www.lryc.cn/news/397191.html

相关文章:

  • 等保测评视角下的哈尔滨智慧城市安全框架构建
  • Java中的数据缓存技术及其应用
  • SQL 索引
  • free第一次成功,第二次失败
  • 各种音频处理器
  • 深度学习探秘:Transformer模型跨框架实现大比拼
  • 京准电钟:云计算中NTP网络时间服务器的作用是什么?
  • Apache中使用CGI
  • 宏任务与微任务对比【前端异步】
  • Autogen和LangGraph对比
  • uniapp vue3微信小程序如何获取dom元素
  • Mongodb索引使用限制
  • 阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice
  • 第11章 规划过程组(二)(11.10制订进度计划)
  • 如何在Spring Boot中集成Hibernate
  • Grind 75 | 3. merge two sorted lists
  • MyBatis(35)如何在 MyBatis 中实现软删除
  • C# 预处理器指令
  • Perl编译器架构:前端与后端的精细分工
  • 14-63 剑和诗人37 - 分布式系统中的数据访问设计
  • 大数据基础:Hadoop之MapReduce重点架构原理
  • 人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解
  • 华为机考真题 -- 螺旋数字矩阵
  • 防御笔记第四天(持续更新)
  • HUAWEI VRRP 实验
  • 领取serv00免费虚拟主机
  • 云开发技术的壁纸小程序源码,无需服务期无需域名
  • 基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
  • 顺序结构 ( 四 ) —— 标准数据类型 【互三互三】
  • 科普文:jvm笔记