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

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

Content-Type的作用是什么?

Content-Type: 用于在请求头部指定资源的类型和字符编码。
请求头中的content-type,就是 B端发给S端的数据类型描述 。
即告诉服务器端,我给你传的数据是某种类型的。
服务器端针对不同类型的数据,做法也是不相同的。
响应头中的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进行文件上传

<template>
    <div> 
        <input type = "file" @change = "Upload" />
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    methods:{
         Upload(event){
            const flie = event.target.files[0];
            const formData = new FormData();
            formData.append("上传的key值",flie);
            axios.post('上传Url',formData,{
                'Content-type' : 'multipart/form-data'
            }).then(res=>{
                // 上传成功后的处理
            },err=>{
                // 出现错误时的处理
            })  
         }
}
<script>

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
1月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
5月前
|
JSON 数据格式
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
|
JSON JavaScript API
axios设置content-type
axios设置content-type
857 0
|
1月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
13 0
|
1月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
65 0
|
3月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
29 1
|
15天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
21天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
28 0
|
29天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
19 0
|
1月前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
14 2