demo.vue 文件
<template> <div class="demo"> <input v-model="importForm.month" 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", this.importForm.month); formData.append("importFile", this.importForm.importFile); console.log('formData', formData); //formData中的參數是隱式的直接看不到, 可以通過formData 實例的get方法獲取 console.log('formData--month', formData.get('month')); console.log('formData--importFile', formData.get('importFile')); this.$post_formData( '/profitLossController/importDataNew', formData ).then( res => { this.$Message.success('導入成功!'); }) .catch( error => { this.$Message.error("請求數據出錯"); }); } */ this.$post_formData('/profitLossController/importDataNew', { 'month': this.importForm.month , 'importFile': this.importForm.importFile }).then( res => { this.$Message.success('導入成功!'); }) .catch( error => { this.$Message.error("請求數據出錯"); }); }, mounted(){ } }; </script> <style scoped> </style>
對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傳到后台 axios.interceptors.request.use( config => { const token = Cookies.get('user'); //獲取Cookie if (token) { config.headers.token = token; // config.params = {'token': token}; //后台接收的參數，后面我們將說明后台如何接收 /** * 原axios封裝的時候對所有的請求請求 進行 JSON 轉換，會破壞掉 formdata 提交數據， * 所以可以通過axios.create() 創建一個新的實例(axiosInstanceNew)進行 formdata提交,見下 */ config.data = JSON.stringify(config.data); //將get請求的參數進行序列化，主要處理數組傳值問題 config.paramsSerializer = function(params) { return qs.stringify(params, {indices: false}); } } else { if (!util.oneOf(config.url, property.noTokenUrl)) { location.reload(); } } return config; }, err => { return Promise.reject(err); } ); // http response 攔截器 axios.interceptors.response.use( response => { //response.data.errCode是我接口返回的值，如果值為2，說明Cookie丟失，然后跳轉到登錄頁，這里根據大家自己的情況來設定 // if(response.data.errCode == 2) { // router.push({ // path: '/login', // query: {redirect: router.currentRoute.fullPath} //從哪個頁面跳轉 // }) // } return response; }, error => { switch (error.response.status) { case 401: Cookies.remove('user'); if (!util.oneOf(error.config.url.substring(util.api.length), property.noTokenUrl)) { location.reload(); } break; // case 404: // // break; // case 500: // // break; default: alert(`請求出錯！請求狀態碼：${error.response.status}。`); } return error; // if(error.response.status == 401){ // //this.$Message.error('32131'); // //util.delCookie('user'); // Cookies.remove('user') // location.reload(); // }else{ // alert("請求出錯!"); // } //return Promise.reject(error.response.data) }); export default axios; // ------------------------------- //創建新的axios //創建一個新的axios實例 const axiosInstanceNew = axios.create({ baseURL: util.api, timeout: 30000, withCredentials: true }); //新axios實例攔截 // http request 攔截器，通過這個，我們就可以把Cookie傳到后台 axiosInstanceNew.interceptors.request.use( config => { const token = Cookies.get('user'); //獲取Cookie if (token) { config.headers.token = token; //將get請求的參數進行序列化，主要處理數組傳值問題 config.paramsSerializer = function(params) { return qs.stringify(params, {indices: false}); } } else { if (!util.oneOf(config.url, property.noTokenUrl)) { location.reload(); } } return config; }, err => { return Promise.reject(err); } ); // 新 http response 攔截器 axiosInstanceNew.interceptors.response.use( response => { //response.data.errCode是我接口返回的值，如果值為2，說明Cookie丟失，然后跳轉到登錄頁，這里根據大家自己的情況來設定 // if(response.data.errCode == 2) { // router.push({ // path: '/login', // query: {redirect: router.currentRoute.fullPath} //從哪個頁面跳轉 // }) // } return response; }, error => { switch (error.response.status) { case 401: Cookies.remove('user'); if (!util.oneOf(error.config.url.substring(util.api.length), property.noTokenUrl)) { location.reload(); } break; // case 404: // // break; // case 500: // // break; default: alert(`請求出錯！請求狀態碼：${error.response.status}。`); } return error; // if(error.response.status == 401){ // //this.$Message.error('32131'); // //util.delCookie('user'); // Cookies.remove('user') // location.reload(); // }else{ // alert("請求出錯!"); // } //return Promise.reject(error.response.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); }
說明：注意上面代碼有這行注釋的地方
/**
* 原axios封裝的時候對所有的請求請求 進行 JSON 轉換，會破壞掉 formdata 提交數據，
* 所以可以通過axios.create() 創建一個新的實例(axiosInstanceNew)進行 formdata提交,見下
*/
為什么要創建一個新的axios實例的可以參考這篇文章：
https://blog.csdn.net/qq_41688165/article/details/80834842
在main.js中掛載到了vue實例原型上
import { post, post_formData } from './libs/http';
Vue.prototype.$post_formData = post_formData;
這樣基本上就可以了。請求時參數直接傳入一個對象就可以了。