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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...