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

news2024/11/13 8:00:41

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
}

</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.coloradmin.cn/o/1904740.html

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

相关文章

数据库系统原理练习 | 作业1-第1章绪论(附答案)

整理自博主本科《数据库系统原理》专业课完成的课后作业&#xff0c;以便各位学习数据库系统概论的小伙伴们参考、学习。 *文中若存在书写不合理的地方&#xff0c;欢迎各位斧正。 专业课本&#xff1a; 目录 一、选择题 二&#xff1a;简答题 三&#xff1a;综合题 一、选择…

验证回文串-string题目

用双指针&#xff0c;left right从两头往中间对比&#xff0c;不是字母的都略过&#xff0c;比的时候化成小写字母 125. 验证回文串 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool isPalindrome(string s) {if(s.size() < 1)return true;int left …

一.2.(2)基本共射放大电路组成、工作原理;

1.基本共射放大电路组成 共什么取决于输入输出&#xff0c;共剩下的那一极 2.工作原理 输入信号ui通过电容C1加到三极管的基 极&#xff0c;引起基极电流iB的变化&#xff0c;iB的变化又使集电极电流ic发生变 化&#xff0c;且ic的变化量是iB变化量的β倍。由于有集电极电压&…

谷哥剪映助手使用教程-剪映自动化批量视频剪辑软件-批量混剪素材替换

谷哥剪映助手是一款提高视频剪辑效率的软件&#xff0c;很多人问具体怎么使用&#xff0c;我会抽点时间把各个功能拆分开来&#xff0c;一个个介绍。 一、按组精准替换素材 该功能可以按组精确替换图片或视频素材&#xff0c;如果你草稿里只有一个素材需要替换&#xff0c;请…

零知识证明技术:隐私保护的利器

在当今信息时代&#xff0c;数据安全和隐私保护的重要性日益凸显。随着技术的发展&#xff0c;密码学在保障信息安全方面发挥着越来越重要的作用。其中&#xff0c;零知识证明技术作为一种新兴的密码学方法&#xff0c;为隐私保护提供了强有力的支持。本文将简要介绍零知识证明…

【ETABS】【RHINO】案例:Swallow to ETABS

文章目录 01. Swallow Overview总览1 LOAD&#xff1a;Defination of LoadCase、Response Combo2 SectionArea Section and Area Load&#xff08;面截面定义与指定&#xff0c;面荷载指定&#xff09;Frame Section with rebarattr and linear load&#xff08;带钢筋属性框架…

【JVM基础篇】Java的四种垃圾回收算法介绍

文章目录 垃圾回收算法垃圾回收算法的历史和分类垃圾回收算法的评价标准标记清除算法优缺点 复制算法优缺点 标记整理算法&#xff08;标记压缩算法&#xff09;优缺点 分代垃圾回收算法&#xff08;常用&#xff09;JVM参数设置使用Arthas查看内存分区垃圾回收执行流程分代GC算…

传统IO和NIO文件拷贝过程

参考&#xff1a;https://blog.csdn.net/weixin_57323780/article/details/130250582

【代码管理的必备工具:Git的基本概念与操作详解】

一、Git 初识 1.提出问题 不知道你工作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;我们在编写各种⽂档时&#xff0c;为了防止⽂档丢失&#xff0c;更改失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不复制出⼀个副本&#xff0c;比如&#xff1a; “…

跨越界限的温柔坚守

跨越界限的温柔坚守 —— 郑乃馨与男友的甜蜜抉择在这个光怪陆离、瞬息万变的娱乐圈里&#xff0c;每一段恋情像是夜空中划过的流星&#xff0c;璀璨短暂。然而&#xff0c;当“郑乃馨与男友甜蜜约会”的消息再次跃入公众视野&#xff0c;它不仅仅是一段简单的爱情故事&#xf…

html+css+JavaScript 实现两个输入框的反转动画

开发时遇到了一个输入框交换的动画 做完之后觉得页面上加些许过渡或动画&#xff0c;其变化虽小&#xff0c;却能极大的提升页面质感&#xff0c;给人一种顺畅、丝滑的视觉体验。它的实现过程主要是通过css中的transition和animation来实现的。平时在开发的时候增加一些动画效…

Spring源码十六:Bean实例化入口探索

上一篇Spring源码十六&#xff1a;Bean名称转化我们讨论doGetBean的第一个方法transformedBeanName方法&#xff0c;了解Spring是如何处理特殊的beanName&#xff08;带&符号前缀&#xff09;与Spring的别名机制。今天我们继续往方法下面看&#xff1a; doGetBean 这个方法…

zabbix 与 grafana 对接

一.安装 grafana 1.初始化操作 初始化操作 systemctl disable --now firewalld setenforce 0 vim /etc/selinux/config SELINUXdisabled 2.上传数据包并安装 cd /opt grafana-enterprise-9.4.7-1.x86_64.rpm #上传软件包 yum localinstall -y grafana-enterprise-9.4.7-1…

Ubuntu编译 OSG

目录 一、安装步骤 二、配置 1、数据文件配置 2、OSG环境变量配置 一、安装步骤 在Ubuntu上安装OSG(OpenSceneGraph),你可以按照以下步骤操作: 打开终端,更新你的包管理器的包列表: sudo apt update 安装必要的依赖库 sudo apt install libglu1-mesa-dev freeglu…

java IO流(1)

一. 文件类 java中提供了一个File类来表示一个文件或目录(文件夹),并提供了一些方法可以操作该文件 1. 文件类的常用方法 File(String pathname)构造方法,里面传一个路径名,用来表示一个文件boolean canRead()判断文件是否是可读文件boolean canWrite()判断文件是否是可写文…

18_特征金字塔网络FPN结构详解

1.1 简介 在深度学习领域&#xff0c;尤其是计算机视觉和目标检测任务中&#xff0c;Feature Pyramid Networks (FPN) 是一种革命性的架构设计&#xff0c;它解决了多尺度特征检测和融合的关键问题。FPN最初由何凯明等人在2017年的论文《Feature Pyramid Networks for Object …

阿里云ecs服务器,nginx多域名多项目部署教程,含本地部署教程

nginx多域名部署项目 本地部署线上部署一、本地部署 第一步:win+r 输入drivers 打开hosts文件,编辑 加行 127.0.0.1 自定义域名 … 第二步:下载 nginx 安装好以后 打开ngin安装目录,选择nginx.conf 打开 #user Administrator; worker_processes

【python技巧】parser传入参数

参考网址: https://lightning.ai/docs/pytorch/LTS/api/pytorch_lightning.utilities.argparse.html#pytorch_lightning.utilities.argparse.add_argparse_args 1. 简单传入参数. parse_known_args()方法的作用就是把不在预设属性里的参数也返回,比如下面这个例子, 执行pytho…

前端技术(三)—— javasctipt 介绍:jQuery方法和点击事件介绍(补充)

6. 常用方法 ● addClass() 为jQuery对象添加一个或多个class <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&…

【密码学】什么是密码?什么是密码学?

一、密码的定义 根据《中华人民共和国密码法》对密码的定义如下&#xff1a; 密码是指采用特定变换的方法对信息等进行加密保护、安全认证的技术、产品和服务。 二、密码学的定义 密码学是研究编制密码和破译密码的技术科学。由定义可以知道密码学分为两个主要分支&#x…