react umi把将file文件数据转成二进制流数据格式

news2024/9/25 21:23:52

后端要求文件上传传递二进制文件???

参考 umi-request上传FormData类型问题_umi-request formdata-CSDN博客

import request from '@/utils/request';
// 批量下发(此接口使用from表单接收)
export async function issuance_audit_create(params: any) {
  return request(`/create`, {
    method: 'post',
    data: params,
    requestType: 'form',
  });
}
/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import ignoreTokenList from '@/utils/ignoreToken';
import { clearAuthAndLogout, getAuthToken } from '@/utils/Token';
import { notification } from 'antd';
import { formatMessage, history } from 'umi';
import { extend } from 'umi-request';
import { getSign } from './sign';

// 错误提示fun
const typeNoticeFun = (code: number | string) => {
  notification.config({ maxCount: 1 }); // 当多个接口报错时只会显示一个错误提示
  const errorText = formatMessage({ id: `res.code.${code}` });
  let codeNum = Number(code);
  if (codeNum === 400 || codeNum === 404 || codeNum === 405 || codeNum === 412) {
    notification.warning({
      message: `Warning`,
      description: errorText,
    });
  } else if (codeNum >= 500 && codeNum <= 599) {
    notification.error({
      message: `Error`,
      description: formatMessage({ id: `res.code.500` }),
    });
  } else if (codeNum === 15011 || codeNum === 15006 || codeNum === 15094) {
    // // 离职黑名单,不展示
    // notification.warning({
    //   message: `Warning`,
    //   description: text,
    // });
  } else if (codeNum !== 15041) {
    // 请假不符合条件的提示语  只保留 表达式输出的提示语即可
    notification.info({
      message: `Info`,
      description: errorText,
    });
  }
};
/**
 * request异常处理程序
 */
const errorHandler = (error: any): Response => {
  const { response } = error;
  if (!response) {
    notification.error({
      description: '您的网络发生异常,无法连接服务器',
      message: '网络异常',
    });
    return {} as Response;
  }
  return response;
};

/**
 * 配置request请求时的默认参数
 */
const request = extend({
  prefix: (<any>window).globalConfig.baseapi || '',
  errorHandler, // 默认错误处理
  // credentials: 'include', // 默认请求是否带上cookie
});
const FNoptions = (data: any) => {
  let params = '';
  if (data) {
    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        params += `${key}=${data[key]}&`;
      }
    }
  }
  // 去除最后一个&
  params = params?.substring(0, params.length - 1);
  return params;
};
// request拦截器, 改变url 或 options.
request.interceptors.request.use((url: any, options: any) => {
  const token = getAuthToken();
  const headers = {
    lang: localStorage.getItem('umi_locale') ?? '',
    // 'Content-Type': 'application/json',
    // Accept: 'application/json',
    // 设置请求头
    sign: '',
    timestamp: 0,
    'tenant-id': '',
    'app-id': '',
    'account-id': '1',
    'account-name': '1',
  };
  if (token) {
    (headers as any).Authorization = token;
  }
  if (options.verifySign || ignoreTokenList.indexOf(history.location.pathname) !== -1) {
    headers['tenant-id'] = sessionStorage.getItem('entry_tenant_id') || '1';
    headers['app-id'] = '380615502080327680';
    // 设置时间戳
    headers.timestamp =
      Math.round(new Date().getTime() / 1000) + Number(sessionStorage.getItem('offsetTime') || 0);
    // 设置sign
    if (options.method === 'post') {
      // post
      headers.sign = getSign(
        headers.timestamp + (options.data ? JSON.stringify(options.data) : ''),
      );
    } else if (options.method === 'get') {
      // get形式
      let params = url.split('?')?.[1] ? url.split('?')?.[1] : FNoptions(options?.params);
      if (params) {
        headers.sign = getSign(headers.timestamp + params);
      } else {
        headers.sign = getSign(`${headers.timestamp}`);
      }
    }
  }

  return {
    url,
    options: {
      ...options,
      headers,
    },
  };
});

export type dataResponse = {
  code: number;
  data: any;
  message?: string;
};
/**
 * 返回体异常处理程序
 */
const dataHandler = (resBody: dataResponse): dataResponse => {
  const { code, message } = resBody;
  if (code && code !== 200) {
    typeNoticeFun(code, message);
  }
  return resBody;
};
// response拦截器, 处理response
request.interceptors.response.use(async (response) => {
  if (response && response.status === 401) {
    typeNoticeFun(401, '');
    setTimeout(() => {
      clearAuthAndLogout();
    }, 3000);
  } else if (response && response.status === 400) {
    typeNoticeFun(400, '');
  } else if (response && response.status === 403) {
    typeNoticeFun(403, '');
    return {} as Response;
  } else if (response && response.status === 404) {
    typeNoticeFun(404, '');
  } else if (response && response.status === 405) {
    typeNoticeFun(405, '');
  } else if (response && response.status === 412) {
    typeNoticeFun(412, '');
  } else {
    const data = await response.clone().json();
    dataHandler(data);
  }
  return response;
});

export default request;
文件获取file  //  Upload  onChange={handleChange}

  // 上传文件改变时的状态
//  const handleChange = ({ fileList }: { fileList: FileType[] }) => {
 //   props.onChange(fileList[0]?.originFileObj);

    return;
  };
const formSumbit = async (values: any) => {
    let validate = values;
    const formData = new FormData();

    formData.append('file', validate?.file);
    formData.append('contractTemplateId', editRecord?.value);

    formData.append('partyACustomerId', validate?.partyACustomer?.value);
    formData.append('partyACustomerName', validate?.partyACustomer?.label);
    if (validate?.partyBCustomer?.value) {
      formData.append('partyBustomerId', validate?.partyBCustomer?.value);
      formData.append('partyBCustomerName', validate?.partyBCustomer?.label);
    }
    if (validate?.partyCCustomer?.value) {
      formData.append('partyCCustomerId', validate?.partyCCustomer?.value);
      formData.append('partyCCustomerName', validate?.partyCCustomer?.label);
    }
    issuance_audit_create(formData).then((res) => {
      if (res.code === 200) {
        setBtnDisabled(true);
        message.success('成功');
        modalForm.setFieldValue('bill_no', res.data);
      } else {
        message.error('失败');
        setBtnDisabled(false);
      }
    });
    return true;
  };

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

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

相关文章

第33讲:K8S集群StorageClass使用Ceph CSI供应商与Cephfs文件系统集成

文章目录 1.Ceph CSI供应商简介2.创建Cephfs文件系统为StorageCLass提供底层存储端2.1.创建Cephfs文件系统2.2.在Cephfs文件系统中为Storageclass创建子目录2.3.在Cephfs文件系统中创建一个子卷 3.在K8S集群中部署Cephfs-CSI供应商客户端3.1.下载Cephfs-CSI客户端的资源编排文件…

计算机网络——网络层(概念及IP地址)

网络层概念 网络层向上层提供的两种服务 在计算机网络领域&#xff0c;网络层应该向运输层提供怎样的服务(“面向连接”还是“无连接”&#xff09;曾引起了长期的争论。 争论焦点的实质就是:在计算机通信中&#xff0c;可靠交付应当由谁来负责?是网络还是端系统&#xff1f…

rfid资产管理系统解决方案 rfid固定资产管理系统建设方案

在现代化的仓库储备中&#xff0c;仅仅完成对货物进出的简单批次处理已经不再足够&#xff0c;对库内货品的种类、数量、生产属性、垛位等信息的清晰记录变得至关重要。然而&#xff0c;传统的资产管理方式如条形码在长期使用中逐渐暴露出不耐脏、数据存储量小、读取间隔短、不…

js吸顶导航

吸顶导航 当我们浏览页面篇幅较大&#xff0c;浏览过半的时候想回到导航位置&#xff0c;只能通过往回滚动或通过”回到顶部”重新滚动到导航位置&#xff0c;这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式&#xff0c;吸顶条导航最大的好处是将最常用或者设计者最…

WAIC | 穿越千年!华院计算AIGC技术实现刘徽、祖冲之和毕达哥拉斯跨时空对话

祖冲之利用刘徽的割圆术&#xff0c;将圆周率π的近似计算精确到小数点后七位&#xff0c;这不仅是数学史上的一项重要突破&#xff0c;也是对无理数逼近问题的早期探索。在现代人工智能中同样能观察到数值逼近的思想&#xff0c;例如模型的训练通常依赖随机优化算法等数值方法…

2.贪心算法.基础

2.贪心算法.基础 基础知识题目1.分发饼干2.摆动序列3.最大子序和4.买股票的最佳时机24.2.买股票的最佳时机5.跳跃游戏5.1.跳跃游戏26.K次取反后最大化的数组和7.加油站8.分发糖果 基础知识 什么是贪心? 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 贪…

Studying-代码随想录训练营day33| 动态规划理论基础、509.斐波那契函数、70.爬楼梯、746.使用最小花费爬楼梯

第33天&#xff0c;动态规划开始&#xff0c;新的算法&#x1f4aa;(ง •_•)ง&#xff0c;编程语言&#xff1a;C 目录 动态规划理论基础 动态规划的解题步骤 动态规划包含的问题 动态规划如何debug 509.斐波那契函数 70.爬楼梯 746.使用最小花费爬楼梯 总结 动态…

MSPM0G3507——时钟配置(与32关系)

先将32端时钟配置分为1&#xff0c;2&#xff0c;3如图 1是PSC左边未经分频的时钟源&#xff08;HZ&#xff09; 2是经过PSC分频的时钟信号&#xff08;HZ&#xff09; 3是最终的输出信号&#xff08;HZ&#xff09; 3输出的是一个定时器周期的HZ&#xff0c;可以转换成时间 …

哨兵系统:一套实时灵活可配置化的业务指标监控系统

简介: 在KOO分期的线下业务中&#xff0c;需要对很多关键业务指标进行实时监控&#xff0c;并需要根据一定的数据格式&#xff0c;通过企微机器人发往对应的企微群&#xff0c;因此KOO分期技术团队在KOO业务指标库之上&#xff0c;搭建了一套KOO分期业务指标监控系统&#xff…

ppt接单渠道大公开‼️

PPT 接单主要分两种&#xff1a;PPT 模板投稿和PPT 定制接单&#xff0c;我们先从简单的 PPT 模板投稿说起。 PPT 模板投稿 利用业余时间&#xff0c;做一些 PPT 模板上传到平台&#xff0c;只要有人下载你的模板&#xff0c;你就有收入。如果模板质量高&#xff0c;简直就是一…

Hadoop-19 Flume Agent批量采集数据到HDFS集群 监听Hive的日志 操作则把记录写入到HDFS 方便后续分析

章节内容 上一节我们完成了内容&#xff1a; Flume 启动测试Flume Conf编写Flume 测试发送和接收数据 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机上搭建过一次&#xff0c;但…

高德API接入安卓相关问题说明

高德API接入安卓相关问题说明 我们都在怀念过去&#xff0c;失去后我们才懂得珍惜&#xff0c;有些人或事早已经远去&#xff0c;可是还是会想起曾经拥有的岁月&#xff0c;会是一种喜悦&#xff0c;会是一种遗憾…… 目前Android开发已经普遍使用Android Studio&#xff0c;开…

优思学院|当今的丰田精益生产模式落伍了吗?

丰田曾经是全球销量最大的汽车制造商&#xff0c;不过现在却被挖苦为可能会成为下一个汽车界的“诺基亚”。 丰田的前CEO丰田章男对于电动汽车的前景持极度怀疑态度&#xff0c;今年4月他下台&#xff0c;由年轻14岁的佐藤恒治接任。这一变动反映了丰田对电动汽车态度的180度大…

streamlit table转置显示

streamlit table转置显示,并且原始的表头放在最左侧 原始表格 代码 import streamlit as st import pandas as pd# 创建一个示例 DataFrame data {Column1: [1, 2, 3],Column2: [4, 5, 6],Column3: [7, 8, 9] } df pd.DataFrame(data)# 转置 DataFrame transposed_df df.T…

进程,进程的调度,进程的调度算法(详解)ฅ( ̳• · • ̳ฅ)

目录 &#x1f607;进程的概念&#xff1a; &#x1f61a;进程的组成&#xff1a; &#x1f970;进程的调度&#xff1a; 一.进程调度的概念&#xff1a; 二.进程调度的方式&#xff1a; 三.进程调度的时机&#xff1a; &#x1f92a;进程的调度算法&#xff1a; 一.先…

如何通过运动改善老年人的腿部肌肉力量?

老年人腿部肌肉力量的重要性 随着年龄的增长&#xff0c;肌肉自然会逐渐萎缩&#xff0c;特别是腿部肌肉。腿部肌肉的强弱直接影响到老年人的行走能力、平衡能力和日常生活的自理能力。因此&#xff0c;通过适当的运动来改善和增强腿部肌肉力量对于老年人来说至关重要。 适合老…

1Panel安装教程:使用Linux服务器安装1Panel面板全流程

使用阿里云服务器安装1Panel面板全流程&#xff0c;云服务器操作系统为CentOS 7.9&#xff0c;安装1Panel非常简单&#xff0c;先执行1Panel安装命令&#xff0c;然后在云服务器安全组中开通1Panel默认端口号、安全入口、用户名和密码等操作&#xff0c;阿里云百科整理详细安装…

前端八股文 跨域

前端跨域和常见解决方案 一、什么是跨域 同源策略是一个重要的安全策略&#xff0c;它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的 资源进行交互。它能帮助阻隔恶意文档&#xff0c;减少可能被攻击的媒介。 有一点必须要注意&#xff1a;跨域并不是请求发不…

Unity插件 Unitask学习日志

Unity插件 Unitask学习日志 下载地址 https://github.com/Cysharp/UniTask点击这里可以查阅中文文档 在Unity 2020,2021 中使用UPM下载会找不到&#xff0c;可以使用2022版本的unity可以在upm中找到。 安装方式&#xff1a; 下载zip之后解压&#xff0c; 复制Plugins 到Uni…

化工厂定位系统有哪些功能?

有伙伴了解化工厂定位系统吗&#xff1f;相信很多小伙伴都没有听说过&#xff0c;感觉离我们的生活比较远&#xff0c;事实上化工厂定位系统也是默默的在保护我们的安全。今天新锐科创就给大家介绍一下这个系统&#xff0c;让大家简单的了解一下。 大家都知道化工厂一直是一个比…