axios 封裝上傳文件的請(qǐng)求方法
axios 和 ajax 都支持異步請(qǐng)求,兩者使用方法大同小異,在此使用 axios 上傳文件的請(qǐng)求。使用的時(shí)候只需要在響應(yīng)的 vue 組件中引入就可以。
import Vue from 'vue'; import VueCookie from 'vue-cookie'; import axios from 'axios'; // import toastr from '../assets/toastr.min'; // Vue.use(axios) let http = {}; // let _baseURL = '/vpaas' let _baseURL = 'http://localhost:8080/vpaas' let ContentType = "application/json"; let uploadFileType = "multipart/form-data"; http.baseURL = _baseURL; /** * 上傳文件的請(qǐng)求 * @param url * @returns {AxiosPromise} */ http.uploadFile = function (url, data) { let config = { //請(qǐng)求的接口,在請(qǐng)求的時(shí)候,如axios.get(url,config);這里的url會(huì)覆蓋掉config中的url url: url, //基礎(chǔ)url前綴 baseURL: _baseURL, transformResponse: [function (data1) { var data = data1; if (typeof data1 == "string") { data = JSON.parse(data1); } //這里提前處理返回的數(shù)據(jù); if (data.message && (data.data === 'login.invalid.token')) { window.localStorage.removeItem("access-user"); alert("超時(shí)請(qǐng)重新登陸"); window.location.href = '/'; } return data; }], //請(qǐng)求頭信息 headers: {'access-user': window.localStorage.getItem('access-user'), 'Content-Type': uploadFileType}, //跨域請(qǐng)求時(shí)是否需要使用憑證 withCredentials: true, // 返回?cái)?shù)據(jù)類型 responseType: 'json', //default }; return axios.post(url, data, config); };
以上這篇axios 封裝上傳文件的請(qǐng)求方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用axios上傳文件(FormData)的方法
- axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
- Vue axios 中提交表單數(shù)據(jù)(含上傳文件)
- 解決axios發(fā)送post請(qǐng)求上傳文件到后端的問(wèn)題(multipart/form-data)
- Element-ui upload上傳文件限制的解決方法
- vue+element_ui上傳文件,并傳遞額外參數(shù)操作
- Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
- Element-UI中Upload上傳文件前端緩存處理示例
- vuejs+element-ui+laravel5.4上傳文件的示例代碼
- vue中element-ui使用axios上傳文件
相關(guān)文章
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時(shí)存在于一個(gè)元素上的時(shí)候,v-if 會(huì)首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07vue+Element-ui實(shí)現(xiàn)分頁(yè)效果實(shí)例代碼詳解
這篇文章主要介紹了vue+Element-ui實(shí)現(xiàn)分頁(yè)效果 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12在IDEA中配置eslint和prettier的全過(guò)程
日常開發(fā)中,建議用可以用Prettier做代碼格式化,然后用eslint做校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于在IDEA中配置eslint和prettier的相關(guān)資料,需要的朋友可以參考下2024-02-02

Vue.config.js配置報(bào)錯(cuò)ValidationError:?Invalid?options?object解

vue獲取路由詳細(xì)內(nèi)容信息方法實(shí)例

Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全