当前位置: 首页 > 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的单例框架 首先编写不继承…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

鸿蒙Navigation路由导航-基本使用介绍

1. Navigation介绍 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;Nav…...