vue+axios通过formdata提交参数和上传⽂件demo.vue ⽂件
<template>
<div class="demo">
<input v-model="h" type="text" name="month"/>
<input ref="importFile" type="file" name="importFile" @change="handleFileChange"/>
<button @click="handleConfimImport">确认导⼊</button>
</div>
</template>
<script>
export default {
name: 'profitLossTree',
components: {},
data(){
return {
importForm: {
month: '',
importFile: '',
},
}
},
computed: {},
watch: {},
methods: {
//导⼊⽂件改变
handleFileChange(){
console.log(this.$refs.importFile.files[0]);
this.importForm.importFile = this.$refs.importFile.files[0];
// console.log(this.importForm, '改变');
},
// 确认导⼊
handleConfimImport(name){
/*              //提取到 post_formData ⽅法中
// vue 中使⽤ window.FormData()，否则会报 'FormData isn't definded'
/
/创建⼀个FormData对象，然后通过append() ⽅法向对象中添加键值对
let formData = new window.FormData();
formData.append("month", h);
formData.append("importFile", this.importForm.importFile);
console.log('formData', formData);  //formData中的参数是隐式的直接看不到, 可以通过formData 实例的get⽅法获取
console.log('formData--month', ('month'));
console.log('formData--importFile', ('importFile'));
this.$post_formData( '/profitLossController/importDataNew',
formData
).then( res => {
this.$Message.success('导⼊成功!');
}) .catch( error => {
this.$("请求数据出错");
});
}
*/
this.$post_formData('/profitLossController/importDataNew', {
'month': h ,
'importFile': this.importForm.importFile
}).then( res => {
this.$Message.success('导⼊成功!');
}) .catch( error => {
this.$("请求数据出错");
});
},
mounted(){
}
};
</script>
<style scoped>
</style>
View Code
对axios进⾏封装的http.js⽂件
import axios from 'axios';
import property from './property'; //引⽤基础配置⽂件
import util from './util'; //引⽤刚才我们创建的util.js⽂件，并使⽤getCookie⽅法
import qs from 'qs';
import Cookies from 'js-cookie';
// axios 配置
axios.defaults.timeout = 30000;
axios.defaults.baseURL = util.api; //这是调⽤数据接⼝
axios.defaults.withCredentials = true;
axios.defaults.headers = {
'Content-Type': 'application/json' //设置跨域头部
};
// http request ，通过这个，我们就可以把Cookie传到后台
quest.use(
config => {
const token = ('user'); //获取Cookie
if (token) {
ken = token;
// config.params = {'token': token}; //后台接收的参数，后⾯我们将说明后台如何接收
/**
* 原axios封装的时候对所有的请求请求进⾏ JSON 转换，会破坏掉 formdata 提交数据，
* 所以可以通过ate() 创建⼀个新的实例(axiosInstanceNew)进⾏ formdata提交，见下
*/
config.data = JSON.stringify(config.data);
//将get请求的参数进⾏序列化，主要处理数组传值问题
config.paramsSerializer = function(params) {
return qs.stringify(params, {indices: false});
}
} else {
if (!Of(config.url, TokenUrl)) {
}
}
return config;
},
err => {
ject(err);
}
);
// http response
sponse.use(
response => {
//Code是我接⼝返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这⾥根据⼤家⾃⼰的情况来设定// if(Code == 2) {
// router.push({
// path: '/login',
inputtypefile不上传文件// query: {redirect: router.currentRoute.fullPath}  //从哪个页⾯跳转
// })
// }
return response;
},
error => {
switch (sponse.status) {
case 401:
if (!fig.url.substring(util.api.length), TokenUrl)) {
}
break;
// case 404:
//
//  break;
// case 500:
//
//  break;
default:
alert(`请求出错！请求状态码：${sponse.status}。`);
}
return error;
// sponse.status == 401){
//    //this.$('32131');
//    //util.delCookie('user');
//    ve('user')
//    load();
// }else{
//    alert("请求出错!");
// }
//sponse.data)
});
export default axios;
// -------------------------------
//创建新的axios
//创建⼀个新的axios实例
const axiosInstanceNew = ate({
baseURL: util.api,
timeout: 30000,
withCredentials: true
});
//新axios实例拦截
/
/ http request ，通过这个，我们就可以把Cookie传到后台
quest.use( config => {
const token = ('user'); //获取Cookie
if (token) {
ken = token;
//将get请求的参数进⾏序列化，主要处理数组传值问题
config.paramsSerializer = function(params) {
return qs.stringify(params, {indices: false});
}
} else {
if (!Of(config.url, TokenUrl)) {
}
}
return config;
},
err => {
ject(err);
}
);
// 新 http response
sponse.use( response => {
/
/Code是我接⼝返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这⾥根据⼤家⾃⼰的情况来设定// if(Code == 2) {
// router.push({
// path: '/login',
// query: {redirect: router.currentRoute.fullPath}  //从哪个页⾯跳转
// })
// }
return response;
}, error => {
switch (sponse.status) {
case 401:
if (!fig.url.substring(util.api.length), TokenUrl)) {
}
break;
// case 404:
//
//  break;
// case 500:
//
//  break;
default:
alert(`请求出错！请求状态码：${sponse.status}。`);
}
return error;
// sponse.status == 401){
//    //this.$('32131');
//    //util.delCookie('user');
//    ve('user')
//    load();
// }else{
//    alert("请求出错!");
// }
/
/sponse.data)
});
/**
* post 请求⽅法
* @param url
* @param data
* @returns {Promise}
*/
export function post (url, data = {}) {
axios.defaults.withCredentials = true;
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
});
});
}
/**
* post 请求⽅法提交格式为 formdata
* @param url
* @param data
* @returns {Promise}
*/
export function post_formData (url, data = {}) {
// vue 中使⽤ window.FormData()，否则会报 'FormData isn't definded'
//创建⼀个FormData对象，然后通过append() ⽅法向对象中添加键值对
// let formData = new window.FormData();
let formData = new FormData(); //这⾥是 .js⽂件
for ( let key in data ){
formData.append( key, data[key]);
}
const options = {
method: 'POST',
// headers: { 'content-type': 'application/x-www-form-urlencoded' },
headers: { 'Content-type': 'multipart/form-data' },
// data: qs.stringify(data),
data: formData,
url,
};
return axiosInstanceNew(options);
}
View Code
说明：注意上⾯代码有这⾏注释的地⽅
/**
* 原axios封装的时候对所有的请求请求进⾏ JSON 转换，会破坏掉 formdata 提交数据，        * 所以可以通过ate() 创建⼀个新的实例(axiosInstanceNew)进⾏ formdata提交，见下        */
为什么要创建⼀个新的axios实例的可以参考这篇⽂章：
blog.csdn/qq_41688165/article/details/80834842
在main.js中挂载到了vue实例原型上
import { post, post_formData } from './libs/http';
Vue.prototype.$post_formData = post_formData;
这样基本上就可以了。请求时参数直接传⼊⼀个对象就可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。