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

上传文件(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 先上传到文件服务器&#xff0c;生成url 然后点击确定按钮&#xff1a; 保存数据 <template><el-dialog top"48px" width"500" title"新增协议" :modelValue"visible" close"handleClose()">…...

【Win10 环境vscode配置boost】

文章目录 Boost exe版本windows环境安装vscode配置安装测试总结 Boost exe版本windows环境安装 这里不介绍boost源码安装&#xff0c;请自行网络搜索。本文要介绍的是window下单c文件&#xff08;cpp&#xff09;&#xff0c;调用boost库的执行配置。不涉及多文件。 安装文件下…...

中间件 redis安装

redis官网地址&#xff1a;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&#xff0c;远程下载redis压缩包&#xff0c;或去官网下载&#xff1a;Downloads …...

[java] 简单的熔断器scala语言案例

failureRateInterval时间内如果addEx(错误)达到 maxFailuresPerInterval 次数&#xff0c;则fused方法返回true,表示触发熔断&#xff0c;进入冷却期coolingInterval&#xff0c;冷却期内fused方法返回true&#xff0c;冷却期过后进入下一个错误统计周期。 scala语言完成 imp…...

【java】序列化的种类和使用场景

文章目录 序列化概述什么是序列化&#xff1f;序列化的作用 Java内置序列化java.io.Serializable接口使用ObjectOutputStream和ObjectInputStream优缺点分析 自定义序列化实现Externalizable接口自定义序列化方法适用场景 第三方序列化框架KryoProtobuf (Google Protocol Buffe…...

Qt5与Qt6中的高DPI缩放属性解析

在Qt5中&#xff0c;高DPI缩放默认是禁用的。为了启用它&#xff0c;开发者需要设置Qt::AA_EnableHighDpiScaling应用程序属性。然而&#xff0c;在Qt6中&#xff0c;高DPI缩放默认是启用的&#xff0c;并且不能被禁用。这种变化使得开发者在处理高分辨率屏幕时更加方便&#x…...

Mac使用总结

Mac 常用快捷键 复制&#xff1a;Cmdc粘贴&#xff1a;Cmdv只粘贴文档&#xff1a; ShiftCmdv行首&#xff1a; Cmd<行尾&#xff1a;Cmd>鼠标处选中到行首&#xff1a;ShiftCmd<鼠标处选中到行尾&#xff1a;ShiftCmd>选中整行&#xff1a;上面两个命令组合鼠标处…...

【日期规则】EXCEl 自定义日期匹配规则,学习基础知识,自由匹配场景

excel 新建规则工具路径&#xff1a;开始 - 条件格式 - 新建规则 B$1TODAY() 注意&#xff1a;新建规则后&#xff0c;要点击 条件格式 - 管理规则 - 应用于 要选择规则应用范围 使用场景&#xff1a; excel 做进度管理当中可以查看当天的情况&#xff1b;每周的学习规划 或…...

苹果电脑可以安装windows操作系统吗?Mac OS X/OS X/macOS傻傻分不清?macOS系统的Java支持?什么是macOS的五大API法王?

苹果电脑可以安装windows操作系统吗? 先抛开虚拟机安装&#xff0c;苹果电脑可以安装Windows操作系统。苹果公司提供了一个名为Boot Camp的软件&#xff0c;它允许用户在Mac电脑上安装Windows操作系统。通过Boot Camp&#xff0c;用户可以在启动电脑时选择是要进入macOS还是Wi…...

芋道SpringBoot配置Maven、创建SpringBoot项目、创建Web接口、读取配置信息

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 第一章 芋…...

物理机内网穿透

前言&#xff1a; 本文主要讲述如何使用内网穿透以及其安全性。 将带领大家在公网上搭建几个常用靶场。 一&#xff0c;什么是内网穿透。 大多数情况下&#xff0c;我们的个人电脑都处于内网&#xff0c;即没有可公开访问的独立 IP 地址&#xff0c;因此其他内网用户找不到…...

Vue 3: 通过图片链接获取图片颜色,间接设置背景颜色

在现代Web开发中&#xff0c;动态获取和处理图像数据是一个常见的需求。例如&#xff0c;你可能希望自动提取一张图片的主色调&#xff0c;以便根据这些颜色进行UI主题调整或其他视觉效果的处理。本文将介绍如何在Vue 3项目中&#xff0c;通过一个图片链接获取图片的颜色信息。…...

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&#xff1a;…...

如何使用生成式AI实现跨领域内容生成

文章目录 引言生成式AI的基本概念定义与分类技术发展现状 跨领域内容生成的技术实现数据准备模型选择与设计训练策略 应用案例分析教育培训新闻媒体文化创意产业 实践建议确定明确的目标构建合适的团队持续迭代改进遵守法律法规 结论 引言 在当今数字化时代&#xff0c;信息的…...

【Linux】socket编程1

socket编程1 1. 网络字节序2. ip地址转换函数3. sockaddr数据结构 1. 网络字节序 多字节数据有大端和小端之分&#xff0c;网络数据流采用大端字节序&#xff0c;如果主机采用的是小端字节序&#xff0c;那么需要转换。 大端&#xff1a;低地址存高字节&#xff0c;高地址存低…...

Linux文件属性 --- 七种文件类型---文件.目录、软硬链接、字符设备文件

目录 七种文件类型 1、普通文件和目录 2、链接文件 2.1硬链接 2.2软链接 3、字符设备文件 一、七种文件类型 Linux的文件属性中一共有以下七种类型 &#xff1a; 符号类型含义解释-普通文件纯文本文件&#xff08;ASCII&#xff09;和二进制文件&#xff08;binary&#xff…...

Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection

论文地址&#xff1a;Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection - ACL Anthologyhttps://aclanthology.org/2024.acl-long.49/ 1. 概述 立场检测被定义为对文本中立场态度的自动推断。根据 Biber 和 Finegan (1988) 的定义&#xff0c;立场包含两个主…...

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 的情况下组织路由&#xff0c;请创建一…...

hive 小文件分析

1、获取fsimage文件&#xff1a; hdfs dfsadmin -fetchImage /data/xy/ 2、从二进制文件解析&#xff1a; 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的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并进行双向数据传输。 主要应用场景&#xff1a;视频弹幕、网页聊天、体育实况更新、股票基金报价实时…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...