前端文件上传 、下载

 一、文件上传

import { importData } from '@/api.js';async importFn() {// 文件数据let file = null; // 文件使用form-data格式,参数使用json格式let formData = new FormData();formData.append("excel", file);formData.append("excelQuery", new Blob([JSON.stringify({name: '文件名'})], { type: 'application/json' }));// 调用接口需要定义headerslet res = await importData(formData, {headers: {'Content-Type': 'multipart/form-data'}});
}

传到接口的参数使用json格式,不然接口可能报415状态码错误

二、文件下载

import { exportData } from '@/api.js';async exportFn() {try {let res = await exportData({keyword: ''}, {headers: {'responseType': 'blob','Content-Type': 'application/json;application/octet-stream','dataType': 'json'}        });let reader = new FileReader();reader.onload = (e) => {let content = reader.result;// 读取内容判断是返回的json 还是 文件数据if (content && content.indexOf('"code":') > -1) {let data = JSON.parse(content);console.error(data.msg);} else {this.exportZip(res, `${this.getTimeStr()}.zip`);}};reader.readAsText(res);} catch (err) {console.error(err);} finally {}
},
// 下载zip
exportZip(data, name) {let blob = new Blob([data], { type: 'application/zip' });let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = name; //定义文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象
},
// 获取时间作为文件名
getTimeStr() {const now = new Date();const year = now.getFullYear();const month = ('0' + (now.getMonth() + 1)).slice(-2);const day = ('0' + now.getDate()).slice(-2);const hours = ('0' + now.getHours()).slice(-2);const minutes = ('0' + now.getMinutes()).slice(-2);const seconds = ('0' + now.getSeconds()).slice(-2);const formattedTime = year + month + day + hours + minutes + seconds;return formattedTime;
},

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

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

相关文章

阿里云ECS部署Mysql数据库

说明 首先需要到阿里云官方购买阿里云产品 ,如果有机会可以免费试用那会更好,跳过购买云服务步骤下面直接演示。 一、阿里云官网示意图 1.百度搜索 阿里云官方 2.点击控制台 3.展开更多 4. 选择云服务器ECS 5. 点击实例 可以看到服务器状态&#xff…

EXCEL,vlookup以及数据去重

1,新建一个work表格,将数据copy进来,并做简单处理,让看起来舒服 2,使用vlookup函数查找数据是否在库中 注意:上图中的Table_array A1:C152,这个值要加绝对引用,写成: $A$1:$C$15…

每个开发人员都应了解的 SOLID 原则

每个开发人员都应了解的 SOLID 原则 面向对象的编程类型为软件开发带来了全新的设计。 这使开发人员能够将具有相同目的/功能的数据合并到一个类中,以处理该类的唯一目的,而无需考虑整个应用程序。 但是,这种面向对象编程并不能防止程序混乱或…

如何避免GCC优化选项对程序带来的干扰?

引言 先从一小段代码说起&#xff1a; #include <stdio.h>int main() {int sum 0;for (int i 0; i < 100; i) {sum i;}printf("sum %d\n", sum);return 0; }将代码以-O2选项编译后&#xff0c;查看目标程序中的汇率指令&#xff1a; gcc test.c -O2 o…

PHP: 开发入门macOS系统下的安装和配置

安装Homebrew 安装 ~~友情提示&#xff1a;这个命令对网络有要求&#xff0c;可能需要翻墙或者用你的手机热点试试&#xff0c;或者把DNS换成&#xff08;114.114.114.114 和 8.8.8.8&#xff09; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebr…

centos7 部署Tomcat和jpress应用

目录 一、静态、动态、伪静态 二、Web 1.0 和 Web 2.0 三、centos7 部署Tomcat 3.1 安装、配置jdk 3.2 安装 Tomcat 3.3 配置服务启动脚本 3.3.1 创建用户和组 3.3.2 创建tomcat.conf文件 3.3.3 创建服务脚本(tomcat.service) 3.3.4 重新加载守护进程并且测试 四、部…

webpack

文章目录 webpack概念打包的场景为什么要打包在打包之外 - 翻译在打包之外 - 小动作 课程重点模块化利用立即执行函数来改变 作用域模块化的优点模块化方案的进化史AMD&#xff08;成型比较早&#xff0c;应用不是很广泛&#xff09;COMMONJSES6 MODULE webpack 的打包机制webp…

【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

React 基础巩固(四十四)——其他Hooks&#xff08;useContext、useReducer、useCallback&#xff09; 一、useContext的使用 在类组件开发时&#xff0c;我们通过 类名.contextType MyContext的方式&#xff0c;在类中获取context&#xff0c;多个Context或者在函数式组件中…

手机设置全局代理ip步骤

在互联网时代&#xff0c;隐私和安全问题备受关注。使用全局代理能够帮助我们保护个人信息&#xff0c;突破地理限制&#xff0c;并提高网络速度。但是&#xff0c;你是否对全局代理的安全性存有疑虑&#xff1f;而且&#xff0c;如何在手机上设置全局代理呢&#xff1f;今天就…

用LangChain开源框架实现知识机器人

前言 Large Language Models (LLMs)在2020年OpenAI 的 GPT-3 的发布而进入世界舞台 。从那时起&#xff0c;他们稳步增长进入公众视野。 众所周知 OpenAI 的 API 无法联网&#xff0c;所以大家如果想通过它的API实现联网搜索并给出回答、总结 PDF 文档、基于某个 Youtube 视频…

优维低代码实践:Context / State

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…

阿里云 MSE + ZadigX ,无门槛实现云原生全链路灰度发布

作者&#xff1a;ZadigX 企业发布现状痛点 目前企业在选择和实施发布策略时面临以下困境&#xff1a; 1. 缺乏云原生能力&#xff1a; 由于从传统部署转变为云原生模式后&#xff0c;技术架构改造需要具备相关能力的人才。这使得企业在发布策略方面难以入手。 2. 缺乏自动化…

U盘删除的文件怎么找回?4个简单方法分享!

“在u盘里不小心删除的文件到底还能不能找回来呀&#xff1f;真的好着急啊&#xff01;这个u盘对我来说真的很重要&#xff0c;怎么恢复里面的数据呢&#xff1f;请各位大佬帮帮我吧&#xff01;” 作为一个便捷的存储工具&#xff0c;u盘逐渐获得大众的青睐。在互联网时代&…

《练习100》36~40

题目36 # 对10个数排序my_list [2,2,1,1,3,67,43,22,55,10,11]print(my_list) my_list.sort() print(my_list)题目37 # 求一个3*3的矩阵对角线元素之和 # 主对角线&#xff1a; 00 11 22 # 副对角线&#xff1a; 02 11 20def get_diagonal_sum(matrix):matsize len(matrix)…

微服务性能分析工具 Pyroscope 初体验

Go 自带接口性能分析工具 pprof&#xff0c;较为常用的有以下 4 种分析&#xff1a; CPU Profiling: CPU 分析&#xff0c;按照一定的频率采集所监听的应用程序 CPU&#xff08;含寄存器&#xff09;的使用情况&#xff0c;可确定应用程序在主动消耗 CPU 周期时花费时间的位置…

计算机毕设 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…

Doccano工具安装教程/文本标注工具/文本标注自己的项目/NLP分词器工具/自然语言处理必备工具/如何使用文本标注工具

这篇文章是专门的安装教程&#xff0c;后续的项目创建&#xff0c;如何使用&#xff0c;以及代码部分可以参考这篇文章&#xff1a; NER实战&#xff1a;(NLP实战/命名实体识别/文本标注/Doccano工具使用/关键信息抽取/Token分类/源码解读/代码逐行解读)_会害羞的杨卓越的博客-…

SO_KEEPALIVE、TCP_KEEPIDLE、TCP_KEEPINTVL、保活包

SO_KEEPALIVE SO_KEEPALIVE 是一个套接字选项&#xff0c;用于设置是否启用 keepalive 机制。在这段代码中没有涉及到 SO_KEEPALIVE 选项的设置。 当 SO_KEEPALIVE 被设置为非零值时&#xff0c;表示启用 keepalive 机制。keepalive 是一种用于检测连接是否仍然有效的机制。通…

SVN学习

SVN学习 以下总结是看了一个b站up主的视频总结出来的。 1. 简介 SVN是代码版本管理工具&#xff0c;它能记住每次的修改、查看所有修改记录、恢复到任何历史版本和恢复已经删除的文件。 SVN比起Git的好处就是使用简单&#xff0c;上手快&#xff1b;具备目录级权限控制&…

【LeetCode每日一题】——1572.矩阵对角线元素的和

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 矩阵 二【题目难度】 简单 三【题目编号】 1572.矩阵对角线元素的和 四【题目描述】 给你一…