关于vue中利用axios常用的表单提交以及文件上传如何传递参数给后端的详解
前言看到好多vue初学者还不会调用接口包括参数的传递,这里做一个详细的介绍以供各位初学者参考。目录前言一、Axios二、安装三、引入四、示例1.表单提交一、AxiosAxios 是一个基于 promise 的易用、简洁且高效的http库。特性支持node端和浏览器端:同样的API,node和浏览器全支持,平台切换无压力支持Promise:使用Promise管理异步,告别传统callback方式丰富
前言
看到好多vue初学者还不会调用接口包括参数的传递,这里做一个详细的介绍以供各位初学者参考,本文主要讲解表单提交,post与get的参数传递写法区别,文件上传提交。
一、Axios
Axios 是一个基于 promise
的易用、简洁且高效的http库。
特性
- 支持node端和浏览器端:同样的API,node和浏览器全支持,平台切换无压力
- 支持Promise:使用Promise管理异步,告别传统callback方式
- 丰富的配置项:支持拦截器等高级配置
- 拦截请求和响应,转换请求数据和响应数据,自动转换 JSON 数据
- 客户端支持防御 XSRF
注:vue有自己的数据请求方式axios,这里我们就不需要在用ajax来请求了。
二、安装
# NPM
$ npm install axios
# YARN
$ yarn add axios
三、引入
打开vue文件目录main.js
,通过如下方式引入即可。
// ES6
import Axios from 'axios';
//将axios挂在到Vue的实例上
Vue.prototype.$axios = Axios
四、示例
这里我以通常提交表单和文件上传为例,传递数据给后端。为了方便编写和页面美观,本文主要是搭配elementUi
的使用。
注:这里仅使用的axios基础功能,供初学者了解使用,通常我们的大中型项目会对axios进行封装处理,配合axios的拦截器和响应器,对接后端状态码的处理,字段是否加密的处理,token传参等等
1.表单提交(post与get)
这里我们以页面、页面html
、页面js
逻辑展示处理。
<el-form
ref="form"
size="mini"
label-width="90px"
label-position="right">
<el-form-item label="系统编号">
<el-input v-model="formData.sysNo"
placeholder="请在此输入">
</el-input>
</el-form-item>
<el-form-item label="系统名称">
<el-input v-model="formData.name"
placeholder="请在此输入">
</el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="formData.desc"
type="textarea"
rows="6"
placeholder="请在此输入">
</el-input>
</el-form-item>
</el-form>
<div class="form-button-box">
<el-button @click="resetForm()" size="small" class="dialog-btn">重置</el-button>
<el-button @click="submitFormData" type="primary" size="small" class="dialog-btn">保存</el-button>
</div>
<script type="text/ecmascript-6">
data () {
return {
formData: {},
}
}
</script>
如上图所示,该表单提交需要编号(sysNo)、名称(name)、描述(desc)三个字段,我们可以直接在data里面声明一个formData:{},此时我们在标签里面通过v-mode
l绑定formData.sysNo,我们声明的formData对象会自动生成一个sysNo属性,其他两个同理如此,这样可以大大减少一些代码的冗余,使之更简洁,同时提交给后端的参数我们直接用formData即可,不需要再去写一长段的字段展示。
在methods
方法里面写保存或者提交逻辑,通常我们的请求方式分为get和post请求,其他请求方式用的比较少,这里就不展示了。
methods:{
submitFormData(){
/*
* url url地址
* params请求数据即需要传递的参数
*/
console.log(this.formData)
/* //params为后端需要传递的参数,通常我们传递参数如下所示。
let params={
sysNo:123,
name:'li',
desc:'test'
}
//此时,我们可以打印一下this.formData,打印结果如下所示或者你通过浏览器控制台可以看到参数与params里面的参数一模一样。
this.formData={
sysNo:'123',
name:'li',
desc:'test'
}
//所以根据上面我们直接用let params=this.formData就可以省略参数的拼写,遇到参数比较多的情况,大大优化了代码量*/
let params=this.formData
let url='填写你url地址' //通常本地开发会遇到跨域问题,所以我们需要在config的index.js里面配置proxyTable反向代理,具体详情自行百度,有很多很清楚的讲解与写法。
// **1.post请求,res即为请求成功后后端返回的信息。**
this.$axios.post(url,params).then(res =>{
console.log('请求成功')
console.log(res)
}).catch(error =>{
console.log('请求失败')
console.log(error )
})
// **2.get请求,get传递参数跟post不同,需要用花括号括起来且只能用 params 来解析,不能换成其他字段,当然你也可以将参数拼接在url后面,如下方式比较简洁。**
this.$axios.get(url,{params}).then(res =>{
console.log('请求成功')
console.log(res)
}).catch(error =>{
console.log('请求失败')
console.log(error )
})
}
}
2.文件上传
这里以上传图片外加一些其他参数为例,上传文件同理如此。
<el-form
ref="form"
size="mini"
label-width="100px"
label-position="right"
<el-form-item label="图标">
<el-upload
action=""
class="avatar-uploader"
:show-file-list="false"
:http-request="UnloadImg">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<span v-if="imageUrl" class="newHover">
<i class="el-icon-delete" ></i>
</span>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="formData.desc"
type="textarea"
rows="6"
placeholder="请在此输入">
</el-input>
</el-form-item>
</el-form>
<div class="form-button-box">
<el-button @click="resetForm()" size="small" class="dialog-btn">重置</el-button>
<el-button @click="submitFormData" type="primary" size="small" class="dialog-btn">保存</el-button>
</div>
在methods
里面调用方法,如上图需求所示,我需要上传图片,填写描述之后再进行提交操作,上传图片成功会触发UnloadImg函数,此时我不需要立即提交,需要把文件file储存下来,所以定义了一个fileData字段储存file。
<script type="text/ecmascript-6">
data () {
return {
fileData: '',
imageUrl:'',
formData:{}
}
}
</script>
methods: {
UnloadImg(file){
// 此时我们只是储存了file,并没有直接提交,如果你需要直接提交直接在后面调用接口,传递FormData格式的file参数即可,复制submitFormData 里面的逻辑即可。
this.imageUrl = URL.createObjectURL(file.file);
this.fileData=file.file
console.log(file.file);
},
submitFormData () {
// 通常文件上传,我们需要将参数变成`FormData`格式,所以通过`new FormData`进行转化,根据需要我们需要传递file和desc两个参数。
let newFormData=new FormData()
newFormData.append('file',this.fileData)
newFormData.append('desc',formData.desc)
this.$axios.post(url,newFormData).then(res =>{
console.log('提交成功')
console.log(res)
}).catch(error =>{
console.log('提交失败')
console.log(error )
})
}
}
更多推荐
所有评论(0)