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

原生 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“ 上传文件

目标&#xff1a;实现文件上传功能 原型图&#xff1a; HTML部分&#xff1a; <div class"invoice-item"><div class"invoice-title">增值税专用发票</div><div class"invoice-box"><el-form-item label"标准…...

【Unity新闻】Unity的产品命名变化

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

《PostMan(一):配置全局令牌》

文章目录 一、配置全局token1、设置2、添加全局3、添加全局变量名称4、选中全局&#xff0c;并查看5、添加赋值脚本6、配置令牌取值7、即可成功获取用户信息 一、配置全局token 1、设置 2、添加全局 3、添加全局变量名称 4、选中全局&#xff0c;并查看 5、添加赋值脚本 // 把…...

如何理解Configurational entropy

Configurational entropy 是热力学和统计力学中的一个重要概念&#xff0c;它描述的是系统中由于其微观状态排列&#xff08;即配置&#xff09;导致的不确定性或混乱程度。不同于热力学中的热熵&#xff08;thermal entropy&#xff09;&#xff0c;它特指那些与系统中的粒子、…...

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(有机发光二极管)显示屏驱动芯片。以下从它的基本特点、工作原理和应用领域进行详细介绍&#xff1a; 一、基本特点 1. 尺寸与分辨率&#xff1a; SSD1306芯片支持多种尺寸的OLED显示屏&#xff0c;常见的有0.96寸、1.3寸等。不同尺寸的屏幕具有不…...

React18快速入门

需要先安装并配置React相关的工具和插件 下载安装Node.js&#xff0c;这里以MacOS Node.js v22.6.0为例 终端命令行检查是否安装成功 node -v npm -vNode.js快速入门 npm设置镜像源 #设置为阿里镜像源 npm config set registry https://registry.npmmirror.com #查看是否生…...

Day11笔记-字典基本使用系统功能字典推导式

二、字典【重点掌握】 1.概念 列表和元组的使用缺点&#xff1a;当存储的数据要动态添加、删除的时候&#xff0c;我们一般使用列表&#xff0c;但是列表有时会遇到一些麻烦,定位元素比较麻烦 # 一个列表/元组保存5个学生的成绩&#xff0c; score_list [66,100,70,78,99] sc…...

Ribbon (WPF)

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

解锁编程潜力,从掌握GitHub开始

目录&#xff1a; 一、搜索开源项目 1、什么是Git 2、Github常用词含义 3、一个完整的项目界面 4、使用Github搜索项目 1&#xff09;in关键词 2&#xff09;star或fork数量去查找 3&#xff09;awesome加强搜索 二、访问速度慢的解决 1、使用网易UU加速器 2、使用…...

HTML转义字符对照表

HTML特殊字符转义对照表一 字符十进制转义字符字符十进制转义字符"&quot;&&amp;<<<&agrave;>>>不断开空格 ?¡¡&Aacute;&aacute;&#226&acirc;&#xffe0;¢¢&circ;&#xffe1;££&…...

【zabbix监控软件(配置及常用键值)】

监控软件–zabbix 同类产品&#xff1a;nagios、cacti 简介&#xff1a;能够部署企业级监控平台。 监控范围 1&#xff09;zabbix SNMP 监控网络设备 防火墙、交换机 2&#xff09;zabbix agent 监控 服务器&#xff1a;raid插槽 CPU 内存插槽 温度 风扇 操作系统&#xff1…...

98、RS485全自动收发电路入坑笔记

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

单机快速部署开源、免费的分布式任务调度系统——Apache DolphinScheduler

本文主要为大家介绍Apache DolphinScheduler的单机部署方式&#xff0c;方便大家快速体验。 环境准备 需要Java环境&#xff0c;这是一个老生常谈的问题&#xff0c;关于Java环境的安装与配置期望大家都可以熟练掌握。 验证java环境 java -version 下载安装包并解压 使用wg…...

【运维监控】Prometheus+grafana监控zookeeper运行情况

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

【C++二分查找】2560. 打家劫舍 IV

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

位段、枚举、联合

位段 在一个结构体中以位&#xff08;最小单位&#xff09;为单位来指定其成员所占的内存长度。位段成员名后面有一个冒号&#xff0c;冒号后有一个数字&#xff08;这个数字是小于等于这个成员所占的位&#xff09;。 typedef struct S {char a : 2;//8char b : 8;//8char c …...

golang学习笔记15——golang依赖管理方法

推荐学习文档 golang应用级os框架&#xff0c;欢迎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#拓展 - 优化冗余脚本的项目&#xff0c; 本章要做的事情是编写单例模式基类&#xff0c;让继承其基类的子类在运行时只存在一个&#xff0c;共有两个单例基类框架&#xff0c;分别是不继承MonoBehaviour的单例和继承MonoBehaviour的单例框架 首先编写不继承…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...