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

news/2024/10/17 20:33:16/

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.ppmy.cn/news/746970.html

相关文章

【城市沙龙】LiveVideoStack Meet|杭州:多媒体新黄金时代

从PPTV、六间房、土豆网&#xff0c;到小米、美团、滴滴、快手、字节跳动&#xff0c;过去20年流媒体应用从PC互联网和宽带时代&#xff0c;过渡到智能手机和4G时代。未来随着基础设施不断升级&#xff0c;新的流媒体创新将会不断涌现。11月14日&#xff0c;LiveVideoStack Mee…

【解决方案】连锁店巡店难?开发成本高?TSINGSEE青犀视频打造一站式连锁店视频上云/安防监控/AI智能分析解决方案

一、背景分析 2020年两会&#xff0c;国家提出"新基建是一个以新发展理念为引领&#xff0c;以技术创新为驱动的数字化经济体的基础建设"&#xff0c;映射在零售商业领域&#xff0c;代表着要用数字化、科技化的手段&#xff0c;帮助商业经济体构建起新的运营空间。…

汇千网:5G如何改变了视频行业?

近年来&#xff0c;新兴视频形态的蓬勃发展带来社会信息传播方式的变革&#xff0c;内容行业的“视频转向”趋势日益明显。与此同时&#xff0c;5G、人工智能、大数据等技术正在渗透视频业务创新实践&#xff0c;推动视频生产传播流程和受众体验的优化&#xff0c;促进行业发展…

如何借助网络营销机构提升短视频营销效果?

移动自媒体时代已经来临&#xff0c;短视频平台吸纳了主流用户&#xff0c;企业网络营销借助短视频营销拓展市场的时代已经来临。那么&#xff0c;如何才能成为一名优秀的短视频运营&#xff1f;有哪些技能是短视频运营人员一定要有的&#xff1f;今天小马识途营销顾问一起和大…

【百收科技】甄视康新零售模式推广引流法#冷敷凝胶#甄视康官网#甄视康联合创始人

【百收科技】甄视康新零售模式推广引流法#冷敷凝胶#甄视康官网#甄视康联合创始人 【百收科技】甄视康新零售模式推广引流法

短视频营销:提高品牌知名度的方法

近两年来受疫情的影响许多人居家隔离&#xff0c;因此商家也嗅到了商机&#xff0c;通过短视频的方式让群众快速知晓自己的品牌&#xff0c;因此短视频也成了提高品牌知名度的好方法。它们简短而引人注目&#xff0c;可以吸引观众并提高可信度&#xff0c;最重要的是短视频可以…

制作视频软件哪个好?教培人最爱的视频制作软件,一款就够!

制作视频软件哪个好&#xff0c;是很多从线下转战线上教培行业从业人员比较纠结的问题。众所周知&#xff0c;一场疫情让从事教培行业多年的资深讲师&#xff0c;也转战线上用制作视频软件进行培训。教育改革&#xff0c;学生双减&#xff0c;也让教培机构很多人被迫失业&#…

视觉的力量,如何利用视频和社交媒体讲述品牌故事

致所有正在接受视觉故事艺术的营销人员 视觉故事的艺术&#xff0c;并将每一天都视为冒险和创新的机会。 作为一个冒险和创新的机会。 你们重新定义了我们如何促进与客户有意义的 与客户的关系&#xff0c;你们激励着我们 激励我们每天都在挑战可能的极限。 本文由丹-罗姆&…