umi-request:使用formData格式上传二进制binary文件流

当需要上传文件时,应该使用 FormData 对象来构造请求体。FormData 对象会自动处理 boundary。

注意:不要手动设置 headers: {‘Content-Type’: ‘multipart/form-data’},因为 FormData 会自动处理,否则会报错 Missing boundary in multipart.

具体代码:

import React, { useState } from "react";
import { UploadOutlined } from '@ant-design/icons';
import { Button, Space, Upload } from 'antd';
import { request } from 'umi';

export default () => {
  const [file, setFile] = useState('');
  const props = {
    name: 'file',
    customRequest(options) {
      const { onSuccess, onError, file: uploadFile } = options;
      console.log(uploadFile);
      // 不实际上传文件,而是存储文件信息
      setFile(uploadFile);
      onSuccess(null, uploadFile); // 伪造一个成功的响应以避免Upload组件显示错误
    },
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("file", file);
    const info = {
      method: "post",
      body: formData,
    };
    
    await request("/upload", info);
  };

  return (
    <Space>
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
      <Button type="primary" onClick={handleUpload}>上传</Button>
    </Space>
  )
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言—常用字符串函数剖析

字符串函数 cplusplus.com/reference/cstring/ 更多没有总结到的函数大家可以自行查阅 这篇文章只是把最需要知道的函数做一个总结 strlen size_t strlen ( const char * str );字符串已经 ‘\0’ 作为结束标志&#xff0c;strlen函数返回的是在字符串中 ‘\0’ 前面出现的…

力扣面试150 文本左右对齐 贪心 字符串 满注释版

Problem: 68. 文本左右对齐 思路 &#x1f469;‍&#x1f3eb; 三叶题解 &#x1f496; Code class Solution { public List<String> fullJustify(String[] words, int maxWidth){List<String> ans new ArrayList<>();// 结果List<String> list …

【网络安全技术】——网络安全设备(学习笔记)

&#x1f4d6; 前言&#xff1a;网络防火墙&#xff08;简称为“防火墙”&#xff09;是计算机网络安全管理中应用最早和技术发展最快的安全产品之一。随着互联应用的迅猛发展&#xff0c;各种安全问题和安全隐患日渐突出。防火墙及相关安全技术能够最大可能地解决各类安全问题…

SpringBoot整合零一万物模型API进行多轮对话

前期准备工作 零一万物官网&#xff1a;https://www.01.ai/cn 零一万物大模型开放平台&#xff1a;https://platform.lingyiwanwu.com/ 选择理由 性价比高很高&#xff0c;模型整体不错&#xff0c;新用户送60元&#xff0c;非常适合研究学习。 开发 只提供了http接口和p…

测试JAVA 测开

测试、java测开 1、测试用例要素&#xff08;4个重要要素&#xff09;2、测试用例的好处3、测试用例的设计方法3.1 基于需求设计测试用例3.2 等价类3.3 边界值3.4 判定表 1、测试用例要素&#xff08;4个重要要素&#xff09; 测试环境操作步骤测试数据预期结果 2、测试用例的…

计算机网络:CSMA/CA协议

计算机网络&#xff1a;CSMA/CA协议 CSMA/CA概述帧间间隔工作原理退避算法虚拟载波监听 CSMA/CA概述 讲解CSMA/CA之前&#xff0c;我们回顾一下CSMA/CD的三个特性&#xff1a; 多址接入MA&#xff1a;多个主机连接在一条总线上&#xff0c;竞争使用总线 载波监听CS&#xff1a…

2025考研数学武忠祥强化班视频,百度网盘课程+讲义PDF更新

25考研的小伙伴们现在应该基础都学习的差不多了吧&#xff01; 是时候进入强化阶段的学习啦。 2025考研数学强化班全程网盘&#xff1a;https://pan.baidu.com/s/1Z029fuCLkyyhIRFqd5QKcg 提取码&#xff1a;p3ue 晚上好&#xff0c;聊聊17堂课的看课攻略。 今年的17堂课还…

文件解读 | 工信部88号文发布,强调7大任务、6大重点!

工业和信息化部于4月7日印发通知&#xff0c;要求各有关单位按照安全生产治本攻坚三年行动工作部署要求&#xff0c;坚持安全发展、预防为主、技管结合&#xff0c;把安全生产和网络运行安全的任务、措施、责任真正落到实处&#xff0c;切实筑牢保障人民群众生命财产安全和社会…

【大模型书籍PDF】复旦新出!大规模语言模型:从理论到实践(书籍分享)

自2018年以来&#xff0c;包含Google、OpenAI、Meta、百度、华为等公司和研究机构都纷纷发布了包括BERT&#xff0c; GPT等在内多种模型&#xff0c;并在几乎所有自然语言处理任务中都表现出色。 今天给大家推荐一本大模型方面的书籍<大规模语言模型&#xff1a;从理论到实…

2024上海国际特种电子暨军民两用技术展览会

2024上海国际特种电子暨军民两用技术展览会 2024 Shanghai International Special Electronics and Military Civilian Dual Use Technology Exhibition 时间&#xff1a;2024年11月18日-20日 地点&#xff1a;上海新国际博览中心 详询主办方陆先生 I38&#xff08;前三位…

模拟相机拍照——对文档进行数据增强

一. 背景 假如我们有一个标准文件&#xff0c;我们对其进行文字识别、版面分析或者其他下游任务就比较容易。然而&#xff0c;当图片是手机拍照获取的&#xff0c;图片中往往有阴影、摩尔纹、弯曲。 那么&#xff0c;如何通过标准的文档&#xff0c;获得类似相机拍照的图片呢&…

Java 网络编程之TCP:基于BIO

环境&#xff1a; jdk 17 IntelliJ IDEA 2023.1.1 (Ultimate Edition) Windows 10 专业版 22H2 TCP&#xff1a;面向连接的&#xff0c;可靠的数据传送协议 Java中的TCP网络编程&#xff0c;其实就是基于常用的BIO和NIO来实现的&#xff0c;本文先讨论BIO&#xff1b; BIO…

C# - 反射动态添加/删除Attribute特性

API: TypeDescriptor.AddAttributes TypeDescriptor.GetAttributes 注意&#xff1a;TypeDescriptor.AddAttributes添加的特性需要使用 TypeDescriptor.GetAttributes获取 根据api可以看到&#xff0c;该接口不仅可以给指定类&#xff08;Type&#xff09;添加特性&#xf…

CLSRSC-400: A system reboot is required to continue installing

RHEL 7.9ORACLE RAC 12.2.0.1.0&#xff0c;在运行root.sh脚本时&#xff0c;出现CLSRSC-400: A system reboot is required to continue installing报错 # /u01/app/12.2.0/grid/root.sh Performing root user operation.The following environment variables are set as:ORA…

【吊打面试官系列】Java高并发篇 -为什么使用 Executor 框架比使用应用创建和管理线程好?

大家好&#xff0c;我是锋哥。今天分享关于 【为什么使用 Executor 框架比使用应用创建和管理线程好&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 为什么使用 Executor 框架比使用应用创建和管理线程好&#xff1f; 为什么要使用 Executor 线程池框架 1、每…

MySQL 锁机制全面解析

目录 1. MySQL的锁类型1.1 全局锁1.2 表锁1.3 行锁1.4 共享锁&#xff08;读锁&#xff09;1.5 排它锁&#xff08;写锁&#xff09;1.6 死锁 2 乐观锁和悲观锁2.1 乐观锁2.2 悲观锁 3 意向锁4 间隙锁5 临键锁6. 事务隔离级别对锁的影响6.1 读未提交&#xff08;Read Uncommitt…

Day92:系统攻防-WindowsLinux远程探针本地自检任意执行权限提升入口点

目录 操作系统-远程漏扫-Nessus&Nexpose&Goby Nessus Nexpose 知识点&#xff1a; 1、远程漏扫-Nessus&Nexpose&Goby 2、本地漏扫-Wesng&Tiquan&Suggester 3、利用场景-远程利用&本地利用&利用条件 操作系统-远程漏扫-Nessus&Nexpose&a…

#LLM入门|RAG#3.5_基于文档的问答

大语言模型&#xff08;LLM&#xff09;构建的问答系统&#xff0c;通过整合用户文档&#xff0c;提供个性化和专业化回答。系统可检索内部文档或产品说明书&#xff0c;结合语言模型生成精准答案。 这种方法让语言模型利用外部文档专业信息&#xff0c;显著提升回答的质量和适…