Vue2里,利用原生js input的 type=“file“时,获取上传成功后的文件名及文件内容。下载文件到本地

功能场景:现在有个上传下载文件的功能,不需要调后端接口,因为需求是不需要将文件存到数据库里。如下图,是上传成功的场景:
在这里插入图片描述
这里限制上传accept类型为pem, 这里主要用到了input的change事件,如果没上传文件则提醒上传文件后再下载,下载功能主要是运用创建a元素,传入blob文件流和文件名,window.URL.createObjectURL(blob)创建下载链接来达到下载的目的,完整代码如下:

<template>
<div>
  <el-form>
          <el-form-item :label="&#

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/448423.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构小记【Python/C++版】——散列表篇

一&#xff0c;基础概念 散列表&#xff0c;英文名是hash table&#xff0c;又叫哈希表。 散列表通常使用顺序表来存储集合元素&#xff0c;集合元素以一种很分散的分布方式存储在顺序表中。 散列表是一个键值对(key-item)的组合&#xff0c;由键(key)和元素值(item)组成。键…

【2023最全kafka面试和答案】

2023最全kafka面试和答案 ​ 1.Kafka中的ISR(InSyncReplicate)、OSR(OutSyncReplicate)、AR(AllReplicate)代表什么&#xff1f; ISR : 速率和leader相差低于10秒的follower的集合OSR : 速率和leader相差大于10秒的followerAR : 所有分区的followerARISROSR 2.Kafka中的HW、L…

防爆气象传感器的技术原理

TH-WFB5在科技日新月异的今天&#xff0c;防爆气象传感器以其独特的魅力和广泛的应用前景&#xff0c;正逐渐走进人们的视野。这种高科技产品不仅为工业安全、环境保护等领域提供了有力保障&#xff0c;更在预测未来气象变化、防范自然灾害等方面发挥着不可替代的作用。 一、防…

ON1 Portrait AI 2023:智能美颜,打造完美人像 mac版

在数字化时代&#xff0c;人像摄影的需求和追求愈发高涨。为了满足摄影师对于完美人像的追求&#xff0c;ON1推出了全新的ON1 Portrait AI 2023。这款软件结合了先进的人工智能技术与人像处理的专业知识&#xff0c;为人像摄影带来了前所未有的智能体验。 ON1 Portrait AI 202…

104. Go单测系列4---编写可测试的代码

文章目录 一、剔除干扰因素二、接口抽象进行解耦三、依赖注入代替隐式依赖四、SOLID原则 本文是Go单测系列的最后一篇&#xff0c;在这一篇中我们不再介绍编写单元测试的工具而是专注于如何编写可测试的代码。 编写可测试的代码可能比编写单元测试本身更加重要&#xff0c;可测…

03-自媒体文章发布

自媒体文章发布 1)自媒体前后端搭建 1.1)后台搭建 ①&#xff1a;资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下&#xff0c;并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 spring:datasource:driver-class-name: com…

五、OpenAI实战之Assistants API

在8线小城的革委会办公室里&#xff0c;黑8和革委会主任的对话再次展开。 黑8&#xff1a;主任&#xff0c;您知道吗&#xff1f;除了OpenAI API&#xff0c;现在还有一项新的技术叫做Assistants API&#xff0c;它可以帮助我们更好地进行对话和沟通。 主任&#xff1a;Assis…

如何保证消息的可靠传输

数据的丢失问题&#xff0c;可能出现在生产者、MQ、消费者中 生产者丢失&#xff1a; 生产者将数据发送到 RabbitMQ 的时候&#xff0c;可能数据就在半路给搞丢了&#xff0c;因为网络问题啥的&#xff0c;都有可能。此时可以选择用 RabbitMQ 提供的事务功能&#xff0c;就是生…

从0到1快速搭建一个jeecg 企业级应用管理后台

一. 基本介绍 官网地址&#xff1a;https://jeecg.com/ JeecgBoot 是一款企业级的低代码平台&#xff01;前后端分离架构 SpringBoot2.x&#xff0c;SpringCloud&#xff0c;Ant Design&Vue3&#xff0c;Mybatis-plus&#xff0c;Shiro&#xff0c;JWT 支持微服务。强大的…

shell详解

系列文章目录 shell脚本基础知识3 shell脚本基础知识3 系列文章目录一、什么是shell二、shell脚本意义三、如何创建shell脚本&#xff08;幻数&#xff09;四、自动生成脚本头信息五、shell脚本运行方式5.1手动在环境中开启指定解释器&#xff0c;不会开启脚本指定的幻数5.2不…

基于 Win Server 2008 复现 IPC$ 漏洞

写在前面 本篇博客演示了使用 winXP&#xff08;配合部分 win10 的命令&#xff09;对 win server 2008 的 IPC$ 漏洞进行内网渗透&#xff0c;原本的实验是要求使用 win server 2003&#xff0c;使用 win server 2003 可以规避掉很多下面存在的问题&#xff0c;建议大家使用 …

【论文阅读】Generative Pretraining from Pixels

Generative Pretraining From Pixels 引用&#xff1a; Chen M, Radford A, Child R, et al. Generative pretraining from pixels[C]//International conference on machine learning. PMLR, 2020: 1691-1703. 论文链接&#xff1a; http://proceedings.mlr.press/v119/chen…

仿牛客网项目---消息队列的实现

本篇文章讲一讲我们的项目中用到的消息队列。 1.阻塞队列 2.kafka 我的项目为什么要用消息队列&#xff1f; 如果采用消息队列&#xff0c;那么评论、点赞、关注三类不同的事&#xff0c;可以定义三类不同的主题&#xff08;评论、点赞、关注&#xff09;&#xff0c;发生相应…

Makedown语法

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

考研C语言复习初阶(5)

目录 一.表达式求值 1.1隐式类型转换 1.2 算术转换 12.3 操作符的属性 二. 指针是什么&#xff1f; 三 指针和指针类型 3.1 指针-整数 3.2 指针的解引用 3.3 野指针 四.指针运算 4.1 指针-整数 4.2 指针-指针 4.3 指针的关系运算 5. 指针和数组 6. 二级指针 …

【学习笔记】VMware vSphere 6.7虚拟化入门

VMware vSphere 6.7虚拟化入门课程介绍 课程内容 1、VMware vSphere 6.7虚拟化入门课程介绍 2、ESXi6.7控制台设置 3、使用vSpkere Host client管理虚拟机 4、VMware EsXi基础操作 5、VMware Esxi存储管理 6、管理ESXi主机网络与虚拟机网络 7、安装配置vCenter Server Applia…

哈希表|1.两数之和

力扣题目链接 /*** Note: The returned array must be malloced, assume caller calls free().*/// leetcode 支持 ut_hash 函式庫typedef struct {int key;int value;UT_hash_handle hh; // make this structure hashable} map;map* hashMap NULL;void hashMapAdd(int key, i…

【JAVA类】利用接口的多继承实现———图书管理系统【附源码】

引言 在我们学习了一些java的基础语法之后&#xff0c;需要把这些知识点可以串起来&#xff0c;这里使用一个简单的小项目可以很好的帮助我们牢记这些知识点&#xff0c;今天就带大家学习一个有关java的小项目&#xff0c;很多学校也经常把这个项目作为他们的课程设计——经典的…

HTML5+CSS3小实例:按钮边框动效

实例:按钮边框动效 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.…

git入门到精通

第3章 Git常用命令 3.1 设置用户签名 3.2 初始化本地库 3.3 查看本地 状态 3.3.1 首次查看&#xff08;工作区没有任何文件&#xff09; 3.3.2 新增文件&#xff08;hello.txt&#xff09; 3.3.3 再次查者&#xff08;检測到末追踪的文件&#xff09; 3.4添加暫存区 3…
最新文章