axios发送文件_ajax和axios有什么关系[通俗易懂]

一、Axios的常用方法

安装

使用npm

npm install axios -S

npm install qs -S

引入axios，qs.js

import axios from 'axios';
import qs from 'qs';

qs是一个url参数转化（parse和stringify）的js库。
是在使用axios时，用于给post方法编码，
qs.parse 方法可以把一段格式化的字符串转换为对象格式
qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。

执行get请求

get方法一

get(url)
//url请求地址
.then(res=>{ 
   
console.log("请求成功时",res)
//请求成功是返回数据
})
.catch(err=>{ 
   
console.log("请求失败",err)
//请求失败返回原因
})

get方法二

get(url,{ 
   parmams:{ 
   key1:value,key2:value2}})
.then(res=>{ 
   
console.log("请求成功时",res);
//请求成功是返回数据
})
.catch(err=>{ 
   
console.log("请求失败",err);
//请求失败返回原因
})

params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

执行post请求

post方法一

//请求序列化数据(urlencoded 方式)
post(url,k1=v1&k2=v2,{ 
   header:{ 
   "Content-Type: application/x-www-form-urlencoded; charset=UTF-8"}}
)
.then(res=>{ 
   
	console.log("请求成功时",res);
	//请求成功是返回数据
})
.catch(err=>{ 
   
	console.log("请求失败",err);
	//请求失败返回原因
})

如果Content-Type设置为“application/x-www-form-urlencoded;charset=UTF-8”无论是POST请求还是GET请求都是可以通过这种方式成功获取参数，但是如果前端POST请求中的body是Json对象的话，会报上述错误。

post方法二

//请求Json对象
post(
url,
{ 
   k1:v1,k2:v2}
)
.then(res=>{ 
   
	console.log("请求成功时",res)
	//请求成功是返回数据
})
.catch(err=>{ 
   
	console.log("请求失败",err)
	//请求失败返回原因
})
//

post方法三

//file文件
post(
url,
formData
)
.then(res=>{ 
   
	console.log("请求成功时",res)
	//请求成功是返回数据
})
.catch(err=>{ 
   
	console.log("请求失败",err)
	//请求失败返回原因
})

FormData的主要用途有两个：
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件。

具体urlencoded 方式/json数据格式如下（qs的用法）

// urlencoded 方式
			 getMovies(){ 
   
				 var data = { 
   
					areaId:50,
					typeId:0,					
					initial:'',
					pageIndex:1,
					pageSize:10,
					MethodName:"BoxOffice_GetMovieData_List"
				};
				this.$http.post(
				"http://www.endata.com.cn/API/GetData.ashx",
				qs.stringify(data),
				{ 
   
				headers:{ 
   "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}
				})
				.then(res=>{ 
   
					console.log("post电影数据",res);
				})
				.catch(err=>{ 
   
					console.log("错误信息",err);
				})
				// json数据格式
				/* this.$http.post("http://www.endata.com.cn/API/GetData.ashx",{ areaId:50, typeId:0, initial:'', pageIndex:1, pageSize:10, MethodName:"BoxOffice_GetMovieData_List" }) .then(res=>{ console.log("post电影数据",res); }) .catch(err=>{ console.log("错误信息",err); }) */
				
			 },	

二、Axios如何实现上传文件

<template>
	<div>
		<h1>首页</h1>
		<div v-if="pics.length">
			<img :src="'http://www.520mg.com'+item" v-for="item in pics" width="100" alt="">
		</div>
		<div>
			<label class="label">
				<input type="file" ref="file" @change="up()"> + 
				<span class="before" :style="{width:pre+'%'}"></span>
			</label>
		</div>
		
	</div>
</template>
<script>
	import axios from 'axios';
	import qs from 'qs';
	export default{ 
   
		data(){ 
   
			return { 
   pics:[],pre:0}
		},
		created(){ 
   
		},
		methods:{ 
   
			// 文件、图片上传
			up(){ 
   
				var that = this;
				// 获取到this 赋值个that
				var file = this.$refs.file.files[0];
				
			     if(!file){ 
   return} // 如果没有文件就返回
				// 拿到上传的文件
				var data = new FormData();
				// 创建一个表单数据
				data.append("file",file);
				console.log("ASas",data)
				// 把图片或文件添加到data
				axios.post(
				"https://www.520mg.com/ajax/file.php",
				data,
				// 第1个参数 url 第二参数 data数据，第三个是配置渲染，
				// onUploadProgress 当上传进度是
				{ 
   onUploadProgress:e=>{ 
   
					 
					that.pre =Math.floor(e.loaded/e.total*100);
					// e.loaded 已经上传的字节数据，e.total 字节数据 转换为1-100的比例值 赋值个pre 
				}}
				)
				.then(res=>{ 
   
					console.log(res);
					if(res.data.error==0){ 
   
						// 如果错误为0
						this.pics.push(res.data.pic);
						// 把图片加入到图片pics数组
					}
					this.$refs.file.value="";
					// 清空表单数据
					this.pre = 0;
					// 清空上传进度数据
				})
			},
		}

/* 设置宽高，颜色 文字内容信息 相对定位 */
	.label .before{ 
   
		position: absolute;
		left:0;
		bottom:0;
		content: "";
		display: inline-block;
		height: 2px;
		width: 0%;
		background-color: orange;
	}
	/* 绝对定定位 宽度默认0% 底部橙色的进度条*/
	.label input{ 
    display: none;}
	/* 被lable包裹的input 单击input 和单击 label效果一致 ，把input隐藏 */

今天的文章axios发送文件_ajax和axios有什么关系[通俗易懂]分享到此就结束了，感谢您的阅读。