文件上传失败原因分析与解决

图片文件上传失败

问题描述:在前端开发时,需要通过表单元素上传图片或其他文本,但是上传不成功,后端接口也没问题

```html
<!--onChange用来绑定数据   handleUpload用来提交数据-->
      <form onSubmit={handleUpload}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" style={{ width: "100px" }} className="btn">
          图片上传
        </button>
      </form>
```
//注意封装axios时记得修改axios的请求头对应的content-type:
//axios.default.......
const handleUpload = (event) => {
    event.preventDefault();
    // 记得使用FormData
    const file = new FormData();
    file.append("file", selectedFile);
    axios({
      method: "post",
      url: "后端接口",
      data: file,
    }).then((res) => {
      if (res.data.status == 200) {
        message.success("上传成功");
      }
    });
  };

报错内容:Current request is not a multipart request
在这里插入图片描述

原因分析:Http请求中的头部信息(header),content-type内容不对应,修改为multipart/form-data即可
在这里插入图片描述
扩展

//Content-Type 是 什么?
HTTP 协议中的一个请求头或响应头字段,用于指示发送或接收的实体的媒体类型,告诉服务器或客户端如何解析和处理请求或响应的主体部分。
//常用的content-type有哪些?
application/json:表示json 数据  
multipart/form-data: 生成边界来分割字段,支持文件上传的格式。
application/x-www-form-urlencoded :HTTP 会将请求参数用 key1=val1&key2=val2 的方式拼接,并放到请求实体里面,不支持文件,一般用于表单提交。  
text/plain:纯文本格式

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

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

相关文章

Cadence HDL导出BOM并将网页数据导入Excle

【仅供个人学习记录&#xff0c;勿作他用。转载注明出处】 1. 如何导出BOM&#xff1f; 【说明】将后缀改为网页“html”&#xff0c;并勾选下面的网页。 之后就会跳出浏览器中你的BOM表就会显示。 2. 将网页BOM导入Excle&#xff1f; 不想要这个 想要这个&#xff01;&…

vscode配置c/c++调试环境

本文记录win平台使用vscode远程连接ubuntu server服务器下&#xff0c;如何配置c/c调试环境。 过程 1. 服务器配置编译环境 这里的前置条件是vscode已经能够连接到服务器&#xff0c;第一步安装编译构建套件&#xff08;gcc、g、make、链接器等&#xff09;和调试器&#xf…

眼底 Fundus、OCT 图竞赛分析

眼底 Fundus、OCT 图竞赛分析 眼底 Fundus 图竞赛&#xff08;8分类&#xff09;算法设计ResNet简介双路ResNet2d网络的工作原理应用数据预处理训练和验证 代码分析 眼底 OCT 图&#xff08;8分类&#xff09;代码分析眼底图分类最新研究 MuReD 视网膜疾病 &#xff08;20分类&…

必须进行App测试吗?专业第三方软件测试机构分享移动App测试好处

在这个移动互联网时代&#xff0c;移动应用程序App已经成为人们生活中必不可少的一部分。然而&#xff0c;随着市场上App数量不断增加&#xff0c;质量的好坏成为用户选择的重要标准。因此&#xff0c;在发布之前&#xff0c;一个必不可少的步骤就是对移动App进行软件测试。 移…

FlashDB移植到STM32F103内部flash,FatFs、FlashDB 、EasyFlash的不同

文章目录 一、前言二、FatFs、FlashDB 、EasyFlash 区别2.1 FlashDB2.2 EasyFlash2.3 FATFS 三、FatFs、FlashDB、EasyFlash 区使用环境3.1 FlashDB:3.2 FATFS:3.3 EasyFlash: 四、FlashDB移植4.1 项目 GITEE 地址4.2 项目目录4.3 移植的目录树4.4 MDK keil 添加文件4.5 添加头…

Python---Numpy学习

首先&#xff0c;先来认识一下Numpy数组对象&#xff0c;以及如何创建它 import numpy as np# 1.认识数组对象 # 指定取值范围和跨度创建数组对象 # 创建一个3行4列的数组 data np.arange(12).reshape(3, 4)print(data)print(type(data))# 维度 print(data.shape)# 维度的个数…

架构师之路--docker命令实践整理

安装docker sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine sudo yum install -y yum-utils sudo yum-config-manager --add-repo http://mirrors.aliyun.com/…

谭浩强第五版C语言课后习题(编程题)+答案

谭浩强第五版作为初学C语言必读的一本教材&#xff0c;课后习题具有非常大的参考价值&#xff0c;也是很多高校期末考试或者考研的重要参考。在这里我整理了一部分个人认为比较重要的编程题&#xff0c;供大家作参考 1.输入两个数&#xff0c;求他们的最大公约数和最小公倍数&…

Vector授权狗驱动安装方法

安装好主体软件后&#xff0c;建议先安装最新官方正版驱动&#xff1a;Vector Driver Setup。然后再复制补丁到C盘指定位置&#xff0c;替换原文件。如果你之前已安装老版本的驱动&#xff0c;则建议先卸载老版本的驱动&#xff0c;主体软件不需要卸载。卸载建议用原来安装时用…

关于柔性阵列(/三维阵列)波束形成的仿真实践以及稳健波束形成的思考(1)

说明 关于波束形成&#xff0c;我之前写过几篇相关的博文&#xff0c;如参考资料[1]、[2]、[3]。除去在博文[2]中有讨论过阵元相对位置关系对波束形成的影响&#xff1a;“如何基于遗传算法优化阵元相对位置关系以压低旁瓣峰值”以外&#xff0c;似乎我认知里的天线阵列&#x…

【Linux实验室】测试ext4文件系统的最大inode数量

【Linux实验室】测试ext4文件系统的最大inode数量 实验目的 1、熟悉inode的定义与作用 2、熟悉Linux文件系统类型 3、测试ext4文件系统的最大inode数量 实验环境 centos7.10 64-bit 实验原理 inode定义 安装操作系统或格式化磁盘分区的时候&#xff0c;操作系统会自动把…

教你如何快速批量删除文件名中相同的文字

在现代计算机系统中&#xff0c;文件夹是一种重要的组织和管理文件的方式。文件夹名称可以反映其内部文件的内容或属性&#xff0c;有助于用户快速识别和定位所需的文件。然而&#xff0c;有时我们会遇到需要统一删除文件夹名称的部分的情况。统一删除文件夹名称的部分可能是为…

PHiSeg:捕捉医学图像分割中的不确定性

PHiSeg&#xff1a;捕捉医学图像分割中的不确定性 摘要引言方法 PHiSeg Capturing Uncertainty in Medical Image Segmentation 摘要 解剖结构和病理的分割本质上是模糊的。例如&#xff0c;结构边界可能不清晰可见&#xff0c;或者不同的专家可能具有不同的注释风格。大多数当…

80个Python数据分析必备实战案例.pdf(附代码),完全开放下载

大家好&#xff0c;我是彭涛。 随着数据时代的来临&#xff0c;Python数据分析技能现在愈加重要&#xff0c;无论是从事数据科学、商业分析还是决策支持&#xff0c;掌握 Python 数据分析的技能都将成为你事半功倍的利器。 之前为大家陆续梳理了基础资料&#xff0c;爬虫资料…

Navicat 干货 | 通过检查约束确保 PostgreSQL 的数据完整性

数据完整性对于任何数据库系统来说都是很重要的一方面&#xff0c;它确保存储的数据保持准确、一致且有意义的。在 PostgreSQL 中&#xff0c;维护数据完整性的一个强大工具是使用检查约束。这些约束允许你定义数据必须遵守的规则&#xff0c;以防止无效数据的插入或修改。本文…

什么是根据人类反馈的强化学习Reinforcement Learning with Human Feedback(RLHF)?

基于人类反馈的强化学习&#xff08;Reinforcement learning with human feedback&#xff09;是近年来越来越受欢迎的一种前沿技术&#xff0c;用于提高大型语言模型的性能。这是种使用人类反馈训练这些模型的有效方法&#xff0c;而该方法的输入组件与搜索评估也有诸多相似之…

企业指标体系的落地与推广:让指标体系真正发挥作用

一、精心策划实施计划&#xff0c;确保项目有序进行 为确保指标体系的顺利落地与推广&#xff0c;我们精心策划了实施计划。首先&#xff0c;我们制定了详细的时间表&#xff0c;明确了项目启动、关键节点和结束时间&#xff0c;确保项目能够按期推进。同时&#xff0c;我们还将…

面试题(四)

目录 61.简述MyISAM和InnoDB的区别 62.Explain语句结果中各个字段分表表示什么 63.索引覆盖是什么 64.最左前缀原则是什么 65.Innodb是如何实现事务的 66.B树和B树的区别&#xff0c;为什么Mysql使⽤B树 67.Mysql锁有哪些&#xff0c;如何理解 68.Mysql慢查询该如何优化…

【JavaWeb】Day18.Vue组件库Element

什么是Element Element&#xff1a;是饿了么团队研发的&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组件&#xff1a;组成网页的部件&#xff0c;例如 超链接、按钮、图片、表格、表单、分页条等等。官网&#xff1a;Element - The worlds…

每日汇评:复活节假期前,欧元保持在关键技术位之间

周四欧洲早盘&#xff0c;欧元兑美元小幅下跌至1.0800&#xff1b; 谨慎的市场情绪帮助美元在数据发布前守住了阵地&#xff1b; 美联储理事沃勒表示&#xff0c;他们并不急于降低政策利率&#xff1b; 周四欧洲早盘&#xff0c;欧元兑美元受到温和的看跌压力&#xff0c;并跌向…