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.mzph.cn/pingmian/42596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

stm32按键检测+光敏+蜂鸣器

按键检测 按键注意消抖&#xff0c;机械按下和松开时均伴随有一连串的抖动&#xff0c;一般为5ms&#xff5e;10ms。可通过软件或硬件消抖。 void Key_Init() {//开启时钟,GPIOBRCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB,ENABLE);//定义结构体变量GPIO_InitTypeDef GPIO_…

080、类与类之间的关系

类与类之间主要存在以下几种关系&#xff1a; 继承&#xff08;Inheritance&#xff09;&#xff1a; 继承是面向对象编程的一个基本特征&#xff0c;它允许我们定义一个类&#xff08;子类或派生类&#xff09;来继承另一个类&#xff08;父类或基类&#xff09;的属性和方法…

孟德尔随机化与痛风3

写在前面 检索检索&#xff0c;刚好发现一篇分区还挺高&#xff0c;但结果内容看上去还挺熟悉的文章&#xff0c;特记录一下。 文章 Exploring the mechanism underlying hyperuricemia using comprehensive research on multi-omics Sci Rep IF:3.8中科院分区:2区 综合性期…

刷题——重建二叉树

重建二叉树_牛客题霸_牛客网 TreeNode* reConstructBinaryTree(vector<int>& preOrder, vector<int>& vinOrder) {// write code hereint n preOrder.size();int m vinOrder.size();if(n 0 || m 0) return NULL;TreeNode* root new TreeNode(preOrde…

【排序算法】—— 快速排序

快速排序的原理是交换排序&#xff0c;其中qsort函数用的排序原理就是快速排序&#xff0c;它是一种效率较高的不稳定函数&#xff0c;时间复杂度为O(N*longN)&#xff0c;接下来就来学习一下快速排序。 一、快速排序思路 1.整体思路 以升序排序为例&#xff1a; (1)、首先随…

web缓存代理服务器

一、web缓存代理 web代理的工作机制 代理服务器是一个位于客户端和原始&#xff08;资源&#xff09;服务器之间的服务器&#xff0c;为了从原始服务器取得内容&#xff0c;客户端向代理服务器发送一个请求&#xff0c;并指定目标原始服务器&#xff0c;然后代理服务器向原始…

启动外部EXE参数

QString rootDir1 QApplication::applicationDirPath(); QString filePathExe1 QString(“%1/run/xxx.exe”).arg(rootDir1); QString fileConfigPath1 QString(“%1/run/”).arg(rootDir1); std::string stdStr filePathExe1.toStdString(); LPCSTR lpcStr stdStr.c_str(…

xxxxxxx.jar中没有主清单属性

写了一个小的springboot demo&#xff0c;构建时由于没加构建的maven插件,导致使用java -jar命令运行时报错xxxxxxx.jar中没有主清单属性。 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boo…

使用Spring Boot和HBase实现大数据存储

使用Spring Boot和HBase实现大数据存储 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 一、引言 随着大数据技术的发展&#xff0c;处理和存储海量数据成为许…

2-27 基于matlab的一种混凝土骨料三维随机投放模型

基于matlab的一种混凝土骨料三维随机投放模型&#xff0c;为混凝土细观力学研究提供一种快捷的三维建模源代码。可设置骨料数量&#xff0c;边界距离、骨料大小等参数。程序已调通&#xff0c;可直接运行。 2-27 matlab 混凝土骨料三维随机投放模型 - 小红书 (xiaohongshu.com)…

CDNOW_master.txt数据分析实战

一、数据详情 该数据集是常见的销售数据集&#xff0c;数据展示的是美国1997后的商品销售数据。包含四个字段&#xff0c;分别是用户id,购买时间&#xff0c;销售量&#xff0c;与销售金额。 二、数据读取与数据清洗 导入必要的包 \s代表的许多空格作为分割&#xff0c;names重…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【明文导入密钥(C/C++)】

明文导入密钥(C/C) 以明文导入ECC密钥为例。具体的场景介绍及支持的算法规格 在CMake脚本中链接相关动态库 target_link_libraries(entry PUBLIC libhuks_ndk.z.so)开发步骤 指定密钥别名keyAlias。 密钥别名的最大长度为64字节。 封装密钥属性集和密钥材料。通过[OH_Huks_I…

【JavaScript脚本宇宙】提升用户体验:探索 JavaScript 库中的浏览器特性支持检测

深入探讨JavaScript库&#xff1a;功能、配置与应用场景 前言 在现代的Web开发中&#xff0c;JavaScript库扮演着至关重要的角色&#xff0c;帮助开发人员简化代码、提高效率、实现更好的用户体验。本文将探讨几个常用的JavaScript库&#xff0c;包括模块加载库、数据绑定库和…

Word文档中公式的常用操作

一、参考资料 二、常用操作 插入公式 Alt 多行公式 Shift Enter 多行公式对齐 WORD Tips: 多行公式编辑及对齐 word自带公式等号对齐&#xff08;可任意符号处对齐&#xff09; 多行公式按照 为基准对齐。 拖动鼠标选中整个公式点击右键&#xff0c;选择【对齐点(…

计算机系统简述

目标 计算机世界并非如此神秘。相反&#xff0c;计算机是非常“确定”的一个系统&#xff0c;即在任何时候&#xff0c;在相同的方法、相同的状态下&#xff08;当然还包括相同的起始条件&#xff09;&#xff0c;同样的问题必然获得相同的结果。其实&#xff0c;计算机并不是…

数据库的学习(4)

一、题目 1、创建数据表qrade: CREATE TABLE grade(id INT NOT NULL,sex CHAR(1),firstname VARCHAR(20)NOT NULL,lastname VARCHAR(20)NOT NULL,english FLOAT,math FLOAT,chinese FLOAT ); 2、向数据表grade中插入几条数据: (3,mAllenwiiliam,88.0,92.0 95.0), (4,m,George&…

【数据结构与算法】快速排序双指针法

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​

【js基础巩固】深入理解作用域与作用域链

作用域链 先看一段代码&#xff0c;下面代码输出的结果是什么&#xff1f; function bar() {console.log(myName) } function foo() {var myName "极客邦"bar() } var myName "极客时间" foo()当执行到 console.log(myName) 这句代码的时候&#xff0c…

树形结构数据库存储表转换

有个树形的菜单, 当初设计表时将数据存储为 level0, level1,leve2,level3..., 表名menus_month 即0层级下子层级1,孙层级2 但是带来一个问题, 如何查询这个树形结构,变得非常复杂 以下是对数据表进行关系转换, 生成两张表, menus和 menus_relastionships 1.建菜单表及关系表…

nullptr和NULL

nullptr 既不是整型类型&#xff0c;也不是指针类型&#xff0c;nullptr 的类型是 std::nullptr_t&#xff08;空指针类型&#xff09;&#xff0c;能转换成任意的指针类型。 NULL是被定义为0的常量&#xff0c;当遇到函数重载时&#xff0c;就会出现问题。避免歧义 函数重载…