关于vue中利用axios常用的表单提交以及文件上传如何传递参数给后端的详解

前言

看到好多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-model绑定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 )
		     })
            }
         }