react导出、导入文件

导出文件:

if (res) {let binaryData = [];binaryData.push(res);let blobUrl = '';blobUrl = res;// let blobUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application / zip' }));console.log(blobUrl);const eleLink = document.createElement('a');eleLink.style.display = 'none';let filename = new Date().getTime() + '.xls';eleLink.href = blobUrl;eleLink.download = filename;document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);window.URL.revokeObjectURL(blobUrl);message.success('导出成功');} else {message.error('导出失败');}

导入-01

HTML:

<span><Button onClick={this.onOpenFileChooser}>导入计划</Button><inputtype="file"accept="png"className="hide"style={{ display: 'none' }}ref={(node) => (fileNode = node)}onChange={this.onBackgroundImageChanged}/>
</span>

Function:

 // 导入onOpenFileChooser = () => {if (!!fileNode) fileNode.click();};onBackgroundImageChanged = async (event) => {event.stopPropagation();let res;const file = event.currentTarget.files[0];const fileName = file.name;console.log('fileName', fileName);event.currentTarget.value = '';//验证是否登入const userInfo = umbrella.getLocalStorage('user');if (!userInfo || !userInfo.appId || !userInfo.appKey) {message.warn('请先登录');window.location.href = '/';return;}//const config = {headers: { 'Content-Type': 'multipart/form-data' },};const param = new FormData();if (!file) {message.warn('请先选择文件');return;}param.append('file', file, fileName);res = await MaintainPlanImport(param, config);if (res?.statusCode === 200) {message.success('上传成功');return;}};

导入-02

import { Button, Upload, message } from 'antd';
import { Import} from '../../../../axios; //导入接口
import React, { useContext, useEffect, useRef, useState } from 'react';
const UploadFile = () => {const dataRef = useRef({upData: false,});const uploadFile = {beforeUpload: (file, fileList) => {if (dataRef.current.upData) {message.warn('请勿同时上传!');return false;}message.loading({ content: '开始上传文件!', key: 'updatable', duration: 0 });dataRef.current.upData = true;const config = { headers: { 'Content-Type': 'multipart/form-data' } };const param = new FormData();param.append('formFile', file, file.name);Import(param, config).then((res) => {console.log('上传文件', res);if (res?.statusCode !== 200) {return Promise.reject(res);}store.triggerRefresh();dataRef.current.upData = false;message.success({ content: '上传文件成功', key: 'updatable', duration: 2 });}).catch((e) => {console.error(e);dataRef.current.upData = false;message.error({ content: '上传文件出错!', key: 'updatable', duration: 2 });});return false;},showUploadList: false,maxCount: 1,};
return (<Upload {...uploadFile}><Button type="primary" ghost>导入</Button></Upload>)
};export default UploadFile;

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

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

相关文章

Windows商店引入SUSE Linux Enterprise Server和openSUSE Leap

在上个月的Build 2017开发者大会上&#xff0c;微软宣布将SUSE&#xff0c;Ubuntu和Fedora引入Windows 商店&#xff0c;反应出微软对开放源码社区的更多承诺。 该公司去年以铂金会员身份加入Linux基金会。现在&#xff0c;微软针对内测者的Windows商店已经开始提供 部分Linux发…

题解:ABC280C - Extra Character

题解&#xff1a;ABC280C - Extra Character 题目 链接&#xff1a;Atcoder。 链接&#xff1a;洛谷。 难度 算法难度&#xff1a;C。 思维难度&#xff1a;B。 调码难度&#xff1a;C。 综合评价&#xff1a;入门。 算法 模拟。 思路 依次遍历s、t的每一项&#x…

pbootcms系统安全防护设置大全

PbootCMS系统简介 PbootCMS是全新内核且永久开源免费的PHP企业网站开发建设管理系统&#xff0c;是一套高效、简洁、 强悍的可免费商用的PHP CMS源码&#xff0c;能够满足各类企业网站开发建设的需要。系统采用简单到想哭的模板标签&#xff0c;只要懂HTML就可快速开发企业网站…

ElasticSearch - 海量数据索引拆分的一些思考

文章目录 困难解决方案初始方案及存在的问题segment merge引入预排序 拆分方案设计考量点如何去除冗余数据按什么维度拆分&#xff0c;拆多少个最终的索引拆分模型演进历程整体迁移流程全量迁移流程流量回放比对验证异步转同步多索引联查优化效果 总结与思考参考 困难 索引数据…

hive表的全关联full join用法

背景&#xff1a;实际开发中需要用到全关联的用法&#xff0c;之前没遇到过&#xff0c;现在记录一下。需求是找到两张表的并集。 全关联的解释如下&#xff1b; 下面建两张表进行测试 test_a表的数据如下 test_b表的数据如下&#xff1b; 写第一个full join 的SQL进行查询…

rust工程

文章目录 CargomacOS配置rust环境vscode配置 目录结构Cargo.tomlcargo命令hello world 跟web交互WebAssembly 跟Android交互配置Android环境JNI例子NDK例子 Rust 是一种现代的、系统级的编程语言&#xff0c;它强调并发安全、内存安全和高性能。Rust 的设计目标是提供一种有着良…

Java中LinkList的基本介绍和细节讨论。双向链表的代码和LinkList的源码。LinkList和ArrayList的比较与选择。

LinkedList 是 Java 中的一个双向链表实现的类&#xff0c;它实现了 List 接口&#xff0c;同时也实现了 Deque 接口&#xff0c;因此可以用作列表、队列或双端队列。下面是关于 LinkedList 的基本介绍和细节讨论&#xff1a; 基本介绍&#xff1a; LinkedList 是一个双向链表…

keepalived+haproxy 搭建高可用高负载高性能rabbitmq集群

一、环境准备 1. 我这里准备了三台centos7 虚拟机 主机名主机地址软件node-01192.168.157.133rabbitmq、erlang、haproxy、keepalivednode-02192.168.157.134rabbitmq、erlang、haproxy、keepalivednode-03192.168.157.135rabbitmq、erlang 2. 关闭三台机器的防火墙 # 关闭…

合并两个链表

题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 比如以下例子&#xff1a; 题目接口&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListN…

SQL阶段性优化

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;MySQL、SQL优化、阶段性优化☀️每日 一言&#xff1a;我们要把懦弱扼杀在摇篮中。 一、前言 我们在做系统的过程中&#xff0c;难免会遇到页面查询速度慢&#xff0c;性能差的问题&#xff0c;…

mysql57、mysql80 目录结构 之 Windows

查看mysql 数据存储的位置 /bin&#xff1a;存储可执行文件&#xff0c;主要包含客户端和服务端启动程序&#xff0c;如mysql.exe、mysqld.exe等 /docs&#xff1a;存放一些文档 /include&#xff1a;用于放置一些头文件&#xff0c;如&#xff1a;mysql.h、mysqld_error.h 等 …

Promise.all和promise.race的应用场景举例

Promise.all( ).then( )适用于处理多个异步任务&#xff0c;且所有的异步任务都得到结果时的情况。 <template><div class"box"><el-button type"primary" plain click"clickFn">点开弹出框</el-button></div> &…

基于Jenkins自动化部署PHP环境---基于rsync部署

基于基于Jenkins自动打包并部署Tomcat环境_学习新鲜事物的博客-CSDN博客环境 准备git仓库 [rootgit ~]# su - git 上一次登录&#xff1a;五 8月 25 15:09:12 CST 2023从 192.168.50.53pts/2 上 [gitgit ~]$ mkdir php.git [gitgit ~]$ cd php.git/ [gitgit php.git]$ git --b…

读取SD卡图片bin文件显示LCD上

读取SD卡bin文件显示图片 Coding 环境搭建&#xff1a; 硬件平台&#xff1a;STM32H750XBH6开发环境&#xff1a;STM32CubeMX V6.8.1KEIL V5.28.0.0STM32H750固件版本&#xff1a;package V1.11.0仿真下载驱动&#xff1a;ST-Link 前言&#xff1a;STM32H750XBH6 的flash只…

改进YOLO系列:10.添加NAMAttention注意力机制

添加NAMAttention注意力机制 1. NAMAttention注意力机制论文2. NAMAttention注意力机制原理3. NAMAttention注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. NAMAttention注意力机制论文 论文题目:NAM: Normalization-based Attention Module 论文…

BGP路由协议的那些事?(下)

BGP路由协议的那些事?(下) 上期问题:在BGP联盟内部的EBGP和IBGP对等体互相传递路由时,LP属性和MED属性是如何变化的呢? 还记得我们说BGP联盟的规则时,有两条关于LP属性和MED属性的规则怎么说来着: 1:路由的LOCAL_PREF属性在整个联盟中都被保留,而不仅仅是在为它们…

【水平垂直居中布局】CSS实现水平垂直居中的5种方法(附源码)

文章目录 写在前面涉及知识点1、子绝对定位父相对定位&#xff0c;子节点设置位移实现1.1效果1.2实现源码 2、子绝对定位父相对定位&#xff0c;子节点设置上下边距2.1 效果2.2 实现源码 3、利用flex布局实现3.1 效果3.2 实现源码 4、利用行高和文本水平居中设置4.1 效果4.2 实…

EasyPOI 实战总结

EasyPOI实战总结 简介 easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言(熟悉的表达式语法),完成以前复杂的写法 使用EasyPOI 环境搭建 # 1.引入相关依…

【PHP】PHP开发教程-PHP开发环境安装

1、PHP简单介绍 PHP&#xff08;全称&#xff1a;Hypertext Preprocessor&#xff09;是一种广泛使用的开放源代码脚本语言&#xff0c;特别适用于Web开发。它嵌入在HTML中&#xff0c;通过在HTML文档中添加PHP标记和脚本&#xff0c;可以生成动态的、个性化的Web页面。 PHP最…

【力扣】202. 快乐数 <哈希>

【力扣】202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 【快乐数】 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果这个过程…