原生 input 中的 “type=file“ 上传文件
目标:实现文件上传功能
原型图:
HTML部分:
<div class="invoice-item"><div class="invoice-title">增值税专用发票</div><div class="invoice-box"><el-form-item label="标准模版:" class="Standard-Template"><div v-show="!isEdit && !ruleForm.taxInvoiceTemplateUrl"><span>待上传</span></div><div v-show="isEdit && !ruleForm.taxInvoiceTemplateUrl"><inputref="taxInvoiceTemplateRef"type="file"style="opacity: 0;position: absolute;left: -9999px;top: -9999px;"@change="taxInvoiceTempalteChange"><iclass="el-icon-upload2"style="color: #0075ff; font-size: 22px; cursor: pointer"@click="$refs.taxInvoiceTemplateRef.click()"/><spanstyle="margin-left: 8px":style="{ color: errorText3 ? 'red' : '#999999' }">{{ errorText3 || "支持上传5M以内.pdf格式的文档" }}</span></div><div v-show="ruleForm.taxInvoiceTemplateUrl"><i class="el-icon-document" /><span>{{ ruleForm.taxInvoiceTemplateName }}</span><iv-if="isEdit"class="el-icon-circle-close"style="cursor: pointer"@click="deleteDoc('taxDigitalInvoice')"/></div></el-form-item><el-form-itemlabel="备注信息超长模板:"class="Standard-Template"><divv-show="!isEdit && !ruleForm.taxInvoiceRemarkTemplateUrl"><span>待上传</span></div><divv-show="isEdit && !ruleForm.taxInvoiceRemarkTemplateUrl"><inputref="taxInvoiceRemarkTemplateRef"type="file"style="opacity: 0;position: absolute;left: -9999px;top: -9999px;"@change="taxInvoiceRemarkTemplateChange"><iclass="el-icon-upload2"style="color: #0075ff;font-size: 22px;cursor: pointer;padding-top: 10px;"@click="$refs.taxInvoiceRemarkTemplateRef.click()"/><spanstyle="margin-left: 0px; padding-top: 3px":style="{ color: errorText4 ? 'red' : '#999999' }">{{ errorText4 || "支持上传5M以内.pdf格式的文档" }}</span></div><div v-show="ruleForm.taxInvoiceRemarkTemplateUrl"><i class="el-icon-document" /><span>{{ ruleForm.taxInvoiceRemarkTemplateName }}</span><iv-if="isEdit"class="el-icon-circle-close"style="cursor: pointer"@click="deleteDoc('taxDigitalInvoiceRemarkInfo')"/></div></el-form-item></div></div>
JS部分:
import * as Api from '@/api/invoiceBasic'data() {return {errorText3: '',errorText4: '',ruleForm: {// 数电发票基础模板taxInvoiceTemplateUrl: '', // 增值税 标准模板taxInvoiceTemplateName: '',taxInvoiceRemarkTemplateUrl: '',taxInvoiceRemarkTemplateName: '',sellerShowAccount: '0',invoiceOperator: ''},rules: {invoiceOperator: [{ required: true, message: '请输入开票人', trigger: 'submit' }]}}},methods: {init() {this.getDetailData()},getDetailData() {this.pageLoading = trueApi.ticketConfigFind().then((res) => {const {taxInvoiceTemplateUrl, taxInvoiceTemplateName,taxInvoiceRemarkTemplateUrl, taxInvoiceRemarkTemplateName,sellerShowAccount, invoiceOperator} = res.data.bodythis.ruleForm.taxInvoiceTemplateUrl = taxInvoiceTemplateUrlthis.ruleForm.taxInvoiceTemplateName = taxInvoiceTemplateNamethis.ruleForm.taxInvoiceRemarkTemplateUrl = taxInvoiceRemarkTemplateUrlthis.ruleForm.taxInvoiceRemarkTemplateName = taxInvoiceRemarkTemplateName// this.ruleForm.taxInvoiceTemplateUrl = taxInvoiceTemplateUrl// this.ruleForm.taxInvoiceTemplateName = taxInvoiceTemplateName// this.ruleForm.ordinaryInvoiceTemplateUrl = ordinaryInvoiceTemplateUrl// this.ruleForm.ordinaryInvoiceTemplateName =// ordinaryInvoiceTemplateNamethis.ruleForm.invoiceOperator = invoiceOperatorthis.ruleForm.sellerShowAccount = String(Number(sellerShowAccount))}).finally((_) => {this.pageLoading = false})},// 增值税专用发票 标准模板taxInvoiceTempalteChange(e) {const file = e.target.files[0]if (file.name.indexOf('.pdf') === -1 || file.size > 5 * 1024 * 1000) {this.errorText3 = '支持上传5M以内.pdf格式的文档'return}const f2 = new FormData()f2.append('file', file)Api.fastdfsUpload(f2).then((res) => {this.ruleForm.taxInvoiceTemplateName = file.namethis.ruleForm.taxInvoiceTemplateUrl = res.data.body})},// 增值税专用发票 - 备注信息超长taxInvoiceRemarkTemplateChange(e) {const file = e.target.files[0]if (file.name.indexOf('.pdf') === -1 || file.size > 5 * 1024 * 1000) {this.errorText4 = '支持上传5M以内.pdf格式的文档'return}const f3 = new FormData()f3.append('file', file)Api.fastdfsUpload(f3).then((res) => {this.ruleForm.taxInvoiceRemarkTemplateName = file.namethis.ruleForm.taxInvoiceRemarkTemplateUrl = res.data.body})},
},
CSS部分:
.invoice-item {
float: left;
width: 430px;
height: 140px;
// height: 126px;
border-radius: 12px;
margin-top: 12px;
margin-bottom: 22px;
background: linear-gradient(to right, #cfe8ff, #f8fcff);
.invoice-box {
width: 100%;
.remark-Template {
/deep/ .el-form-item {
margin-bottom: 0px;
}
}
/deep/ .el-form-item__label {
width: fit-content !important;
padding-left: 20px;
font-weight: 600;
font-size: 12px;
color: #101010;
}
/deep/ .el-form-item__content {
text-align: right;
padding-right: 20px;
margin-left: 180px !important;
}
}
}
.invoice-title {
font-weight: 600;
font-size: 16px;
color: #0075ff;
padding: 20px;
padding-bottom: 8px;
}
效果:
相关文章:

原生 input 中的 “type=file“ 上传文件
目标:实现文件上传功能 原型图: HTML部分: <div class"invoice-item"><div class"invoice-title">增值税专用发票</div><div class"invoice-box"><el-form-item label"标准…...

【Unity新闻】Unity的产品命名变化
快速回顾一下Unity产品命名的调整。 在2023年 Unity就宣布版本命名的变化,将使用Unity 6作为最新版本的命名。 具体的规则,在论坛里进行了说明。 以后正式的LTS版本就是Unity 6,将在2024年末发布。 而不管是之前的Runtime费还是今天的费用…...

《PostMan(一):配置全局令牌》
文章目录 一、配置全局token1、设置2、添加全局3、添加全局变量名称4、选中全局,并查看5、添加赋值脚本6、配置令牌取值7、即可成功获取用户信息 一、配置全局token 1、设置 2、添加全局 3、添加全局变量名称 4、选中全局,并查看 5、添加赋值脚本 // 把…...
如何理解Configurational entropy
Configurational entropy 是热力学和统计力学中的一个重要概念,它描述的是系统中由于其微观状态排列(即配置)导致的不确定性或混乱程度。不同于热力学中的热熵(thermal entropy),它特指那些与系统中的粒子、…...

H5端接入萤石监控
官方文档 EZOPEN协议 下滑至-平台架构 web/h5端使用文档 <template><div :id"video-container${index}${index2}" class"w-full bg-black"></div> </template><script>export default {data() {return {EZVIZAToken:…...
SSD1306 OLED显示屏驱动方案简介
SSD1306是一种常见的单色OLED(有机发光二极管)显示屏驱动芯片。以下从它的基本特点、工作原理和应用领域进行详细介绍: 一、基本特点 1. 尺寸与分辨率: SSD1306芯片支持多种尺寸的OLED显示屏,常见的有0.96寸、1.3寸等。不同尺寸的屏幕具有不…...

React18快速入门
需要先安装并配置React相关的工具和插件 下载安装Node.js,这里以MacOS Node.js v22.6.0为例 终端命令行检查是否安装成功 node -v npm -vNode.js快速入门 npm设置镜像源 #设置为阿里镜像源 npm config set registry https://registry.npmmirror.com #查看是否生…...
Day11笔记-字典基本使用系统功能字典推导式
二、字典【重点掌握】 1.概念 列表和元组的使用缺点:当存储的数据要动态添加、删除的时候,我们一般使用列表,但是列表有时会遇到一些麻烦,定位元素比较麻烦 # 一个列表/元组保存5个学生的成绩, score_list [66,100,70,78,99] sc…...

Ribbon (WPF)
Ribbon (WPF) 在本文中主要包含以下内容: Ribbon组件和功能应用程序菜单快速访问工具栏增强的工具提示 Ribbon是一个命令栏,它将应用程序的功能组织到应用程序窗口顶部的一系列选项卡中。Ribbon用户界面(UI)增加了特性和功能的可发现性,使用…...

解锁编程潜力,从掌握GitHub开始
目录: 一、搜索开源项目 1、什么是Git 2、Github常用词含义 3、一个完整的项目界面 4、使用Github搜索项目 1)in关键词 2)star或fork数量去查找 3)awesome加强搜索 二、访问速度慢的解决 1、使用网易UU加速器 2、使用…...
HTML转义字符对照表
HTML特殊字符转义对照表一 字符十进制转义字符字符十进制转义字符""&&<<<à>>>不断开空格 ?¡¡Ááâ⢢¢ˆ£££&…...
【zabbix监控软件(配置及常用键值)】
监控软件–zabbix 同类产品:nagios、cacti 简介:能够部署企业级监控平台。 监控范围 1)zabbix SNMP 监控网络设备 防火墙、交换机 2)zabbix agent 监控 服务器:raid插槽 CPU 内存插槽 温度 风扇 操作系统࿱…...

98、RS485全自动收发电路入坑笔记
因为RS485采用叉分信号,只支持半双工。正常的RS485芯片驱动电路是需要GPIO来切换发送和接收模式。如下图所示,一般的RS485电平转换芯片都有RE/DE脚,用来切换收发模式。 例如这篇推荐:芯片RS485自动收发电路常见问题与应对策略 但…...

单机快速部署开源、免费的分布式任务调度系统——Apache DolphinScheduler
本文主要为大家介绍Apache DolphinScheduler的单机部署方式,方便大家快速体验。 环境准备 需要Java环境,这是一个老生常谈的问题,关于Java环境的安装与配置期望大家都可以熟练掌握。 验证java环境 java -version 下载安装包并解压 使用wg…...

【运维监控】Prometheus+grafana监控zookeeper运行情况
运维监控系列文章入口:【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、prometheus集成grafana监控zookeeper1、修改zookeeper配置2、修改prometheus配置3、导入grafana模板4、验证 本示例通过zookeeper自带的监控信息暴露出来,然后…...

【C++二分查找】2560. 打家劫舍 IV
本文涉及的基础知识点 C二分查找 LeetCode2560. 打家劫舍 IV 沿街有一排连续的房屋。每间房屋内都藏有一定的现金。现在有一位小偷计划从这些房屋中窃取现金。 由于相邻的房屋装有相互连通的防盗系统,所以小偷 不会窃取相邻的房屋 。 小偷的 窃取能力 定义为他在…...

位段、枚举、联合
位段 在一个结构体中以位(最小单位)为单位来指定其成员所占的内存长度。位段成员名后面有一个冒号,冒号后有一个数字(这个数字是小于等于这个成员所占的位)。 typedef struct S {char a : 2;//8char b : 8;//8char c …...
golang学习笔记15——golang依赖管理方法
推荐学习文档 golang应用级os框架,欢迎star基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学…...

Linux 挂载磁盘与开机自动挂载操作指南
Linux 挂载磁盘与开机自动挂载操作指南 文章目录 Linux 挂载磁盘与开机自动挂载操作指南一 挂载磁盘1 查看硬盘信息2 新增数据盘执行分区3 新建分区4 创建一个主分区5 分区编号6 初始磁柱编号7 截止磁柱编号8 查看新建分区信息9 分区结果写入10 新分区同步操作系统11 设置新分区…...

『功能项目』单例模式框架【37】
我们打开上一篇36C#拓展 - 优化冗余脚本的项目, 本章要做的事情是编写单例模式基类,让继承其基类的子类在运行时只存在一个,共有两个单例基类框架,分别是不继承MonoBehaviour的单例和继承MonoBehaviour的单例框架 首先编写不继承…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
CppCon 2015 学习:Time Programming Fundamentals
Civil Time 公历时间 特点: 共 6 个字段: Year(年)Month(月)Day(日)Hour(小时)Minute(分钟)Second(秒) 表示…...