axios文件上传和 Content-Type类型介绍

news2024/12/23 20:52:05

Content-Type的作用是什么?

Content-Type: 用于在请求头部指定资源的类型和字符编码。

  1. 请求头中的content-type,就是 B端发给S端的数据类型描述 。 即告诉服务器端,我给你传的数据是某种类型的。
    服务器端针对不同类型的数据,做法也是不相同的。

  2. 响应头中的content-type,就是 S端发给B端的数据类型描述。 即告诉浏览器端,我给你发的是什么样格式的数据,

那么浏览器端针对不同类型的数据,处理方法不同。

从上面这两段话我们可以知道,请求头和响应头只能够都有content-type。 请求头中的
content-type,B端发给S端的数据类型描述 响应头中的content-type,就是 S端发给B端的数据类型描述。

Content-Type的类型有几种

第1种类型:application/x-www-form-urlencoded 浏览器的原生form表单。 提交的数据按照
key1=val1&key2=val2 的方式进行编码,key和val都进行了URL转码

第2种类型: 我们使用表单进行文件上传文件。 必须让 form 的 enctype 等于这个值multipart/form-data 如下:

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

在使用axios进行文件上传的时候。
需要指定Content-Type的类型为 multipart/form-data

//利用了FormData
let forms = new FormData();
//下面的file是后端要求的key
forms.append('file',info)
axios.post('/file/aaa/xxx', forms, {
    headers: {
        //文件上传的类型
        'Content-Type': 'multipart/form-data',
        'Authorization':'xxx' //携带的token
    }
}).then(res => {
   console.log(res)
})

第3种类型:序列化后的 JSON 字符串,最常用,特别适合 RESTful 的接口。 application/json
axios默认就是使用的 Content-Type: “application/json” 这一种类型值 第4种类型:一种使用 HTTP
作为传输协议. XML 作为编码方式的远程调用规范 text/xml。 FormData的简单介绍 使用FormData数据进行文件的上传;
FormData是XMLHttpRequest Level2提供的一个接口对象, 提供了一种表单数据的键值对的构造方法,
经过它的数据处理可以使用XMLHttpRequest.send( )方法送出;
如果送出时的编码类型被设为"multipart/form-data"
使用FormData实例的append()方法或set()方法设置数据.
其中append与set区别在于,一个是不会覆盖原值,只添加新值。一个是会覆盖原值
使用input设置type=filte来接受上传的文件,通过change事件的event对象获取上传的文件对象

aixos结合FormData进行文件上传
请添加图片描述

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

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

相关文章

分布式监控Zabbix的部署

zabbix 6.0 一、zabbinxzabbix的简介Zabbix 6.0 功能组件zabbix的监控原理zabbix 6.0的特性 二、zabbix 6.0 部署部署 Nginx PHP 环境并测试部署数据库&#xff0c;要求 MySQL 5.7 或 Mariadb 10.5 及以上版本编译安装 zabbix Server 服务端部署 Web 前端&#xff0c;进行访问…

HTTP的一些概念

文章目录 HTTP定义URI&URL HTTP 常见的状态码http 首部请求首部字段响应首部字段为cookie服务的首部字段get请求和post请求及区别GET 和 POST 方法是否安全和幂等 HTTP特性HTTP&#xff08;1.1&#xff09; 的优点有哪些HTTP/1.1 的缺点HTTP/1.1 的性能HTTP/1.1 相比 HTTP/…

[MySQL]表的操作

[MySQL]表的操作 文章目录 [MySQL]表的操作1. 创建表2. 创建表的示例3. 查看表4. 修改表5. 删除表6. 关于表操作 1. 创建表 语法&#xff1a; CREATE TABLE [IF NOT EXISTS] table_name(field1 datatype1 [COMMENT 注释信息],field2 datatype2 [COMMENT 注释信息],field3 dat…

伦敦金实时报价技术分析

技术分析是从伦敦金的价格行为&#xff0c;来分析未来走势变化的方法。伦敦金市场的变化可以有多种表现形式&#xff0c;其中根据市场价格、成交量等的变化&#xff0c;可以探索出一些规律&#xff0c;技术分析者通过对市场过去和现在的行为&#xff0c;应用数学原理去理解价格…

【Python】基于Python的机器学习分类的模型选择:交叉验证和模型质量评估

目录 1 简介2 思路分解与说明3 完整代码 1 简介 最近完成一个工作&#xff0c;就基于一些表格化的数据进行机器学习分类。 由于分类是研究中的关键步骤&#xff0c;所以首先要选择到底哪个模型适合我们的分类任务。 比较传统且经典的选择方法就是用交叉验证。 交叉验证是什么可…

openwrt使用记录

背景&#xff1a; 平时在vmware中做实验时候&#xff0c;经常需要在不同的机器上下载一些github上的项目进行调试&#xff0c;之前解决方案是在路由器层小米ac2100上装openwrt&#xff0c;试用一番发现太卡了。放弃&#xff0c;这次在vmware中安装作为小米ac2100的旁路由 规划…

推荐五款优秀,可替代商业软件的开源软件

​ 在日常的使用中&#xff0c;我们需要使用各种软件来提高我们的工作效率或者进行创意的表达。然而&#xff0c;商业软件价格昂贵&#xff0c;某些国产软件又充斥着广告。因此&#xff0c;开源软件成为了一个不错的选择&#xff0c;以下是我推荐的五款优秀的开源软件。 图片浏…

一文get,最容易碰上的接口自动化测试问题汇总

本篇文章分享几个接口自动化用例编写过程遇到的问题总结&#xff0c;希望能对初次探索接口自动化测试的小伙伴们解决问题上提供一小部分思路。 sql语句内容出现错误 空格&#xff1a;由于有些字段判断是变量&#xff0c;需要将sql拼接起来&#xff0c;但是在拼接字符串时没有…

手写操作系统--完善内核加载器之内存检测

这一篇我们来完善内核加载器的功能&#xff0c;我们知道内存是很重要的区域&#xff0c;我们需要对内存有个大致的描述&#xff0c;哪些可用&#xff0c;那些不可用&#xff0c;内存有多大。因此在内核加载器中我们需要对内存进行检测。内存检测的方法翻译文档如下&#xff1a;…

DAY39:贪心算法(八)无重叠区间+划分字母区间+合并区间

文章目录 435.无重叠区间思路完整版注意点 右区间排序 763.划分字母区间思路完整版如何确定区间分界线debug测试时间复杂度 总结 56.合并区间思路最开始的写法&#xff1a;直接在原数组上修改debug测试 修改版时间复杂度总结 435.无重叠区间 给定一个区间的集合 intervals &am…

“钓鱼”网站也有https?如何一招识破?

作为企业网站安全建设的基础设施&#xff0c; SSL证书可以对数据进行加密传输&#xff0c;保护数据在传输过程中不被监听、截取和篡改&#xff0c;因此部署了SSL证书的网站会比传统的http协议更加安全&#xff0c;也更受主流操作系统和浏览器的信任。 然而随着SSL证书的普及&a…

AI做PPT,五分钟搞定别人一天的量,最喜欢卷PPT了

用AI做PPT 主题生成大纲制作PPT 主题生成大纲 如何使用人工智能工具&#xff0c;如ChatGPT和mindshow&#xff0c;快速生成PPT。 gpt国内版 制作PPT&#xff0c;你可能只有一个主题&#xff0c;但没有明确的提纲或思路。 问gpt&#xff1a;计算机视觉的周工作汇报。我这周学…

MyBatis 与 Hibernate 有哪些不同?

ORM框架的选择与适用场景 MyBatis和Hibernate都是Java领域中流行的面向关系型数据库的ORM&#xff08;对象关系映射&#xff09;框架。它们的共同目标是简化开发人员操作数据库的工作&#xff0c;提供便捷的持久化操作。然而&#xff0c;两者在设计理念和适用场景上有所不同。…

Zabbix6.0 的部署

目录 一、概述 二、 zabbix 1.zabbix简介 2.zabbix监控原理 3. Zabbix 6.0 新特性 3.1Zabbix server高可用防止硬件故障或计划维护期的停机 3.2 Zabbix 6.0 LTS新增Kubernetes监控功能&#xff0c;可以在Kubernetes系统从多个维度采集指标 4. Zabbix 6.0 功能组件 4.1Z…

浏览器内核的介绍

文章目录 1、什么是浏览器内核2、常用浏览器内核3、浏览器内核分类3. 1、Trident3.2、Gecko3.3、Webkit3.4、Chromium3.5、Presto3.6、国内主流浏览器 4、五大主流浏览器&#xff08;诞生顺序&#xff09;4.1、IE&#xff08;Internet Explorer&#xff09;浏览器4.2、Opera浏览…

解决vue3中使用个别form表单校验失灵

当我点击校验时 其他都有触发校验 唯独radio没有触发&#xff0c;绑定都没有问题 看一下代码 const data reactive({form: {},rules: {serverStatus: [{ required: true, message: "服务状态不能为空", trigger: change }],tenantName: [{ required: true, messag…

hypef 五、请求及响应

文档地址 Hyperf https://hyperf.wiki/2.0/#/zh-cn/response 一、请求 1.1 安装 composer require hyperf/http-message 框架自带不用手动安装。 1.2 请求对象 在 onRequest 生命周期内可获得Hyperf\HttpServer\Request对象。 可以通过以来注入和路由对应参数获取。 de…

我的创作纪念日 --- 简单记录

理想并不是一种空虚的东西&#xff0c;也并不玄奇&#xff1b;它既非幻想&#xff0c;更非野心&#xff0c;而是一种追求善美的意识。 机缘 大家好&#xff0c;今天是我成为创作者的第256天&#xff0c;也是我在CSDN上发布的第81篇文章。在这里&#xff0c;我想和大家简单记…

C#(五十五)之线程死锁

死锁是指多个线程共享资源是&#xff0c;都占用同意部分资源&#xff0c;而且都在等待对方师范另一部分资源&#xff0c;从而导致程序停滞不前的情况 示例&#xff1a; /// <summary>/// 定义一个刀/// </summary>public static object knife new object();/// …

git install报错问题

报错如下&#xff1a; fatal: unable to connect to githurb.com: 运行如下命令即可&#xff1a; git config --global url.https://github.com/.insteadOf git://github.com/ git config --global url."https://".insteadOf git://接着再删除node_moudels包&…