js上传下载函数封装

上传函数封装

 const addSubmit = (val) => {if (val.length < 1) {messageTitle('上传文件不能为空', 'warning') // messageTitle是我封装的elmentui的message组件,可根据自己的代码调整} else {const formData = new FormData()formData.append('multipartFile', val[0].raw)account.createAccount(formData).then(res => {const reader = new FileReader();reader.onload = event => {try {// 将读取的string转换为json// 若果能转换成功 => 接口返回的是json数据,提示报错信息const json = JSON.parse(event.target.result);if (json.code === SUCCESSCODE) {messageTitle('上传成功', 'success')} else {messageTitle(json.message, 'error')}} catch (err) {messageTitle('上传失败', 'error')// 不能被转换成json => 接口返回的是blob, 下载blob文件const blob = new Blob([res], { type: 'application/vnd.ms-excel' })const fileName = '失败文件下载'const url = window.URL.createObjectURL(blob)const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link) // 点击后移除,防止生成很多个隐藏a标签}};reader.readAsText(res);})}}

下载函数封装


function download(data) {const param = {uuid: data.split('@')[0],fileName: data.split('@')[1]}axios({method: 'post',url,data: param,responseType: 'blob',headers: {'Content-Type': 'application/json;charset=UTF-8',}}).then(res => {if (res.data.type == 'application/json') {handlerResponseError(res.data)} else {const disposition = res.headers['content-disposition']if (disposition == undefined) {return MessageBox.alert('下载失败', '失败', { type: 'error' });}let fileName = disposition && disposition.substring(disposition.indexOf("''") + 2, disposition.length)fileName = decodeURI(fileName)// 开始处理文件下载 - resList.data为文件流const blobUrl = window.URL.createObjectURL(new Blob([res.data], {type: res.headers['content-type']}))const link = document.createElement('a')link.style.display = 'none'link.href = blobUrl// fileName 文件的名称link.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)}}).catch(_ => MessageBox.alert('网络请求失败', '失败', { type: 'error' }))
}function handlerResponseError(data) {const fileReader = new FileReader()fileReader.onload = function () {try {const { res_code, status } = JSON.parse(fileReader.result) // 说明是普通对象数据,后台转换失if (status == '000_000_0002') {return MessageBox.alert('下载失败', '失败', { type: 'error' });}} catch (err) {// 解析成对象失败,说明是正常的文件流console.log('success...')}}fileReader.readAsText(data)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

伐木猪小游戏

欢迎来到程序小院 伐木猪 玩法&#xff1a;控制小猪点击屏幕左右砍树&#xff0c;不能碰到树枝&#xff0c;考验手速与眼力&#xff0c;记录分数&#xff0c;快去挑战伐木吧^^。开始游戏https://www.ormcc.com/play/gameStart/199 html <script type"text/javascript…

Map(关联数组)和Set(集合)

目录 Map和Set是用来专门查找的数据结构,查找效率非常高 Map是key-value模型(对应了两个东西) Set是纯key模型(只对应i一个东西) Map的使用 Map的方法 Map的put()方法 Map的get()方法 Map的getOrdefault()方法 Map的keySet()方法 Map的entrySet()方法 Entry是Map的内部接口类​…

TensorFlow(1):深度学习的介绍

1 深度学习与机器学习的区别 学习目标&#xff1a;知道深度学习与机器学习的区别 区别&#xff1a;深度学习没有特征提取 1.1 特征提取方面 机器学习的特征工程步骤是要靠手动完成的&#xff0c;而且需要大量领域专业知识深度学习通常由多个层组成&#xff0c;它们通常将更简…

【数据结构】线性表的链式存储结构

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 顺序存储结构的不足的解决办法 从上一节我们对顺序表的讨论中可见,线性表的顺序存储结构的特点是: 逻辑关系上相邻的两个元素在物理位置(内存)上也相邻,因此可以随机存取表中…

持续交付-Jenkinsfile 语法

实现 Pipeline 功能的脚本语言叫做 Jenkinsfile&#xff0c;由 Groovy 语言实现。Jenkinsfile 一般是放在项目根目录&#xff0c;随项目一起受源代码管理软件控制&#xff0c;无需像创建"自由风格"项目一样&#xff0c;每次可能需要拷贝很多设置到新项目&#xff0c;…

Springboot---整合对象储存服务MinIO

OSS 「OSS」的英文全称是Object Storage Service&#xff0c;翻译成中文就是「对象存储服务」&#xff0c;官方一点解释就是对象存储是一种使用HTTP API存储和检索非结构化数据和元数据对象的工具。 白话文解释就是将系统所要用的文件上传到云硬盘上&#xff0c;该云硬盘提供了…

FreeRTOS源码阅读笔记1--task.c

在FreeRTOS中&#xff0c;创建任务有两种方式&#xff1a;动态创建和静态创建。区别就是&#xff1a;动态创建任务的栈和任务TCB是由操作系统动态分配&#xff08;malloc&#xff09;内存空间&#xff0c;任务删除时可以释放内存&#xff08;free&#xff09;&#xff1b;而静态…

css设置浏览器表单自动填充时的背景

浏览器自动填充表单内容&#xff0c;会自动设置背景色。对于一般的用户&#xff0c;也许不会觉得有什么&#xff0c;但对于要求比较严格的用户&#xff0c;就会“指手画脚”。这里&#xff0c;我们通过css属性来设置浏览器填充背景的过渡时间&#xff0c;使用户看不到过渡后的背…

Python--快速入门三

Python--快速入门三 1.Python列表 列表是Python用于储存一系列数据的容器(特点是可以存放不同类型的数据) python_list ["键盘",True,66,88.8] 列表是可变数据类型&#xff0c;可以直接对列表中的元素进行更改而不需要赋值给本身 列表方法&#xff1a; 1.appen…

Ubuntu22.04安装MySql

在Ubuntu上安装mysql就比较简单了 1、常规操作&#xff0c;更新软件包列表 apt update 至少安装之前看一眼版本吧 apt list mysql-server 嗯&#xff0c;是8.0.35版本的 2、安装mysql apt install mysql-server 3、给root用户设置密码 # 第一次安装完无需密码,让你输入…

Mysql关联查询

Mysql关联查询 1、数据准备 # 班级表 create table class(id int primary key auto_increment,name varchar(20),description varchar(100) );# 学生表 create table student(id int primary key auto_increment,sn varchar(20),name varchar(20),email varchar(20),class_id…

快速搭建UmiJS4.0项目及常见问题解决方案

yarn create umi选择项目类型 ○ Pick Umi App Template │ Simple App选择创建工具 ○ Pick Npm Client │ yarn选择源 ○ Pick Npm Registry │ taobao启用 Prettier&#xff08;可选&#xff09; yarn umi g √ Pick generator type Enable Prettier -- Setup Pr…

使用python将word转pdf

平常想将word转pdf&#xff0c;只能使用办公工具&#xff0c;但是这些工具还收费&#xff0c;真实太犊子了&#xff0c;净想着平民手里的三瓜俩枣了。今天发现用python 可以将word转pdf,很好用特别记录下、可以直接调用 # -*- coding: utf-8 -*- # Time : 2023/11/7 9:42 # …

剑指JUC原理-15.ThreadLocal

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…

大语言模型比武

今年随着 ChatGPT 的流行&#xff0c;并在各个领域有一定程度生产级别的应用。国内外也掀起了一股大语言模型浪潮&#xff0c;各大厂商都推出了自己的大语言模型&#xff0c;阿里推出了 通义千问&#xff0c;腾讯推出了 Hunyuan&#xff0c;亚马逊云推出了 Titan&#xff0c;大…

Spring中Bean的作用域

2023.11.8 默认情况下&#xff0c;Spring的IoC容器创建的Bean对象是单例的。下面测试一下&#xff1a; 创建一个bean类&#xff1a; package spring6.beans;public class SpringBean { }配置一下xml文件&#xff1a; <?xml version"1.0" encoding"UTF-8&…

【C++】万字一文全解【继承】及其特性__[剖析底层化繁为简](20)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.继承&复用&组合的区别1&…

web框架与Django

web应用程序 什么是web Web应用程序是一种可以通过Web访问的应用程序&#xff0c;程序的最大好处是用户很容易访问应用程序&#xff0c;用户只需要有浏览器即可&#xff0c;不需要再安装其他软件 应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序&#xff0c;也就是说这…

web3案例中解决交易所中 ETH与token都是0问题 并帮助确认展示是否成功

可能写了这么久 很多人会发现一个问 我们前面的案例 个人在交易所中的 自定义token 和 ETH 一直是放了个0 大家也不太敢确认是否真的有效 那么 很简单 我们操作 存入一些进交易所 不就ok了 我们 来看之前交易所写的代码 我们写了 depositEther 存入 ETH 和 depositToken 存入…

企业微信开启接收消息+验证URL有效性

企业微信开启接收消息验证URL有效性 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对…