当前位置: 首页 > news >正文

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.lryc.cn/news/140465.html

相关文章:

  • (一)Redis——String
  • Spring Boot多环境指定yml或者properties
  • MinDoc:针对IT团队的文档、笔记系统
  • 【分享】华为设备登录安全配置案例
  • Starrocks与MySQL函数的区别
  • 【HTML】学习笔记(自用持续更新)
  • 代码随想录训练营第四十二天|0-1背包理论基础(一)、0-1背包理论基础(二)、416分割等和子集
  • linux 免交互
  • 自然语言处理从入门到应用——LangChain:索引(Indexes)-[文档加载器(Document Loaders)]
  • 7.接着跑一下triton官方教程
  • 波奇学C++:stl的list模拟实现
  • Flask 项目结构
  • 云计算在IT领域的发展和应用
  • 8年测试经验之谈 —— 接口自动化测试requests
  • 求助:vue从后端获取数据,如何对获得的数据进行拆分?
  • html5拖拽文件上传需阻止默认事件
  • 深入剖析Kubernetes之Pod基本概念(一)
  • idea 对JavaScript进行debug调试
  • npm init
  • 微信小程序开发教学系列(6)- 数据缓存与本地存储
  • 跟我学c++中级篇——模板的基础术语说明
  • 最新Win10离线安装.NET Framework 3.5的方法(附离线包2022/3/22)
  • 最新docker多系统安装技术
  • 系统架构设计高级技能 · 云原生架构设计理论与实践
  • Springboot集成RocketMQ——简单使用
  • 第一百二十四回 Flexible组件
  • 关于stm32推挽带有上下拉电阻的思考、IO口驱动能力是什么
  • 考研408 | 【操作系统】 内存管理
  • C# 工厂模式
  • 在云服务器上安装Jenkins