上传文件(vue3)

使用el-upload 先上传到文件服务器,生成url
然后点击确定按钮: 保存数据
<template><el-dialog top="48px" width="500" title="新增协议" :modelValue="visible" @close="handleClose()"><div class="form-main"><el-formref="ruleFormRef":model="ruleForm"label-width="90px"class="demo-ruleForm"status-icon><el-form-itemlabel="协议名称: "prop="agreementName":rules="[{required: true,message: '请输入协议名称',trigger: 'blur'},{message: '最多20个字符',trigger: 'blur',max: 20}]"><el-input v-model="ruleForm.agreementName" placeholder="请输入协议名称" /></el-form-item><el-form-itemlabel="协议文件: "prop="fileUrl":rules="{required: true,message: '请选择协议文件',trigger: 'blur'}"><div><el-uploadref="uploadRef"class="upload-demo":on-change="beforeUpload":auto-upload="false":show-file-list="false"><template #trigger><div class="upBtn">{{ fileName == "" ? "协议文件" : fileName }}</div></template><div class="div-desc">支持上传pdf文件</div></el-upload></div></el-form-item></el-form></div><template #footer><el-button @click="handleClose()">取消</el-button><el-button type="primary" @click="confirm(ruleFormRef)">确定</el-button></template></el-dialog>
</template><script setup lang="ts">
import type { FormInstance } from "element-plus"
import { addAgreementManage } from "@/api/agreementManage"
import { uploadFile } from "@/api/common"
import { uploadCodeStr } from "@/types/common"
defineProps({visible: {type: Boolean,default: false}
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({agreementName: "",fileUrl: ""
}) as any
const emits = defineEmits(["closeDialog"])
const handleClose = (getData?: any) => {ruleForm.value = {agreementName: "",fileUrl: ""}fileName.value = ""nextTick(() => {ruleFormRef.value?.resetFields()})emits("closeDialog", getData ? true : false)
}
// 确定按钮
const confirm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {addAgreementManage({agreementName: ruleForm.value.agreementName,fileUrl: ruleForm.value.fileUrl}).then((res: any) => {if (res.code == 200) {ElMessage.success(res.msg)handleClose(true)} else {ElMessage.error(res.msg)}})} else {console.log("error submit!", fields)}})
}
// 上传文件
const beforeUpload = (file: any) => {// 判断文件类型const isPDF = file.raw.type === "application/pdf"if (!isPDF) {ElMessage.error("上传文件只能是 PDF 格式!")return}const isLt2M = file.size / 1024 / 1024 < 10if (!isLt2M) {ElMessage.error("上传文件大小不能超过 10MB!")return}upload(file)
}
let fileName = ref("")
// 上传文件
const upload = async (file: any) => {try {let { code, data } = await uploadFile({multipartFile: file.raw,code: uploadCodeStr})if (code && code == 200) {ruleForm.value.fileUrl = data.relativePathnextTick(() => {ruleFormRef.value?.validate()})fileName.value = file.raw.name} else {ElMessage.error("上传失败")}} catch (error) {// ElMessage.error("上传失败")}
}
</script><style scoped lang="scss">
.form-main {.upBtn {color: #409eff;cursor: pointer;}
}
.div-desc {width: 100%;color: #909399;font-size: 12px;margin-top: -10px;
}
</style>
二 查看协议
因为是个URL 直接打开就可以

/*** 预览协议*/const goPreview = (row: any) => {//新页面打开window.open(row.fileUrl)// window.open(configLlocation.filePathUrl + row.fileUrl)}
相关文章:
上传文件(vue3)
使用el-upload 先上传到文件服务器,生成url 然后点击确定按钮: 保存数据 <template><el-dialog top"48px" width"500" title"新增协议" :modelValue"visible" close"handleClose()">…...
【Win10 环境vscode配置boost】
文章目录 Boost exe版本windows环境安装vscode配置安装测试总结 Boost exe版本windows环境安装 这里不介绍boost源码安装,请自行网络搜索。本文要介绍的是window下单c文件(cpp),调用boost库的执行配置。不涉及多文件。 安装文件下…...
中间件 redis安装
redis官网地址:Redis - The Real-time Data Platform 环境 CentOS Linux release 7.9.2009 (Core) java version "17.0.12" 2024-07-16 LTS 1、通过压缩包安装redis 1,远程下载redis压缩包,或去官网下载:Downloads …...
[java] 简单的熔断器scala语言案例
failureRateInterval时间内如果addEx(错误)达到 maxFailuresPerInterval 次数,则fused方法返回true,表示触发熔断,进入冷却期coolingInterval,冷却期内fused方法返回true,冷却期过后进入下一个错误统计周期。 scala语言完成 imp…...
【java】序列化的种类和使用场景
文章目录 序列化概述什么是序列化?序列化的作用 Java内置序列化java.io.Serializable接口使用ObjectOutputStream和ObjectInputStream优缺点分析 自定义序列化实现Externalizable接口自定义序列化方法适用场景 第三方序列化框架KryoProtobuf (Google Protocol Buffe…...
Qt5与Qt6中的高DPI缩放属性解析
在Qt5中,高DPI缩放默认是禁用的。为了启用它,开发者需要设置Qt::AA_EnableHighDpiScaling应用程序属性。然而,在Qt6中,高DPI缩放默认是启用的,并且不能被禁用。这种变化使得开发者在处理高分辨率屏幕时更加方便&#x…...
Mac使用总结
Mac 常用快捷键 复制:Cmdc粘贴:Cmdv只粘贴文档: ShiftCmdv行首: Cmd<行尾:Cmd>鼠标处选中到行首:ShiftCmd<鼠标处选中到行尾:ShiftCmd>选中整行:上面两个命令组合鼠标处…...
【日期规则】EXCEl 自定义日期匹配规则,学习基础知识,自由匹配场景
excel 新建规则工具路径:开始 - 条件格式 - 新建规则 B$1TODAY() 注意:新建规则后,要点击 条件格式 - 管理规则 - 应用于 要选择规则应用范围 使用场景: excel 做进度管理当中可以查看当天的情况;每周的学习规划 或…...
苹果电脑可以安装windows操作系统吗?Mac OS X/OS X/macOS傻傻分不清?macOS系统的Java支持?什么是macOS的五大API法王?
苹果电脑可以安装windows操作系统吗? 先抛开虚拟机安装,苹果电脑可以安装Windows操作系统。苹果公司提供了一个名为Boot Camp的软件,它允许用户在Mac电脑上安装Windows操作系统。通过Boot Camp,用户可以在启动电脑时选择是要进入macOS还是Wi…...
芋道SpringBoot配置Maven、创建SpringBoot项目、创建Web接口、读取配置信息
🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 系列文章目录 第一章 芋…...
物理机内网穿透
前言: 本文主要讲述如何使用内网穿透以及其安全性。 将带领大家在公网上搭建几个常用靶场。 一,什么是内网穿透。 大多数情况下,我们的个人电脑都处于内网,即没有可公开访问的独立 IP 地址,因此其他内网用户找不到…...
Vue 3: 通过图片链接获取图片颜色,间接设置背景颜色
在现代Web开发中,动态获取和处理图像数据是一个常见的需求。例如,你可能希望自动提取一张图片的主色调,以便根据这些颜色进行UI主题调整或其他视觉效果的处理。本文将介绍如何在Vue 3项目中,通过一个图片链接获取图片的颜色信息。…...
opencv-python的简单练习
题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2:…...
如何使用生成式AI实现跨领域内容生成
文章目录 引言生成式AI的基本概念定义与分类技术发展现状 跨领域内容生成的技术实现数据准备模型选择与设计训练策略 应用案例分析教育培训新闻媒体文化创意产业 实践建议确定明确的目标构建合适的团队持续迭代改进遵守法律法规 结论 引言 在当今数字化时代,信息的…...
【Linux】socket编程1
socket编程1 1. 网络字节序2. ip地址转换函数3. sockaddr数据结构 1. 网络字节序 多字节数据有大端和小端之分,网络数据流采用大端字节序,如果主机采用的是小端字节序,那么需要转换。 大端:低地址存高字节,高地址存低…...
Linux文件属性 --- 七种文件类型---文件.目录、软硬链接、字符设备文件
目录 七种文件类型 1、普通文件和目录 2、链接文件 2.1硬链接 2.2软链接 3、字符设备文件 一、七种文件类型 Linux的文件属性中一共有以下七种类型 : 符号类型含义解释-普通文件纯文本文件(ASCII)和二进制文件(binaryÿ…...
Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection
论文地址:Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection - ACL Anthologyhttps://aclanthology.org/2024.acl-long.49/ 1. 概述 立场检测被定义为对文本中立场态度的自动推断。根据 Biber 和 Finegan (1988) 的定义,立场包含两个主…...
NextJs 路由管理
NextJs 路由管理 Defining Routes 1. Creating Routes 2. Creating UI export default function Page() {return <h1>Hello, Next.js!</h1> }Route Groups 路由组 1. 在不影响 URL 路径的情况下组织路由 要在不影响 URL 的情况下组织路由,请创建一…...
hive 小文件分析
1、获取fsimage文件: hdfs dfsadmin -fetchImage /data/xy/ 2、从二进制文件解析: hdfs oiv -i /data/xy/fsimage_0000000019891608958 -t /data/xy/tmpdir -o /data/xy/out -p Delimited -delimiter “,” 3、创建hive表 create database if not exists…...
【JavaWeb后端学习笔记】WebSocket通信
WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。 主要应用场景:视频弹幕、网页聊天、体育实况更新、股票基金报价实时…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
