快捷導(dǎo)航

axios 封裝上傳文件的請(qǐng)求方法

更新時(shí)間：2018年09月26日 16:49:56 作者：倪默遙

今天小編就為大家分享一篇axios 封裝上傳文件的請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.x版詳解computed和watch的使用
這篇文章主要介紹了vue2.x版詳解computed和watch的使用，文章在基于vue框架的前端項(xiàng)目開(kāi)發(fā)過(guò)程中，只要涉及到稍微復(fù)雜一點(diǎn)的業(yè)務(wù)，我們都會(huì)用到computed計(jì)算屬性這個(gè)鉤子函數(shù)，可以用于一些狀態(tài)的結(jié)合處理和緩存的操作
2022-07-07
vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue根據(jù)值給予不同class的實(shí)例
今天小編就為大家分享一篇vue根據(jù)值給予不同class的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue 中的compile操作方法
這篇文章主要介紹了Vue 中的compile操作方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-02-02
vue打包部署到springboot并通過(guò)tomcat運(yùn)行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過(guò)tomcat運(yùn)行的操作方法,本文通過(guò)實(shí)例圖文并茂的形式給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-05-05
利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能示例代碼
本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-01-01
關(guān)于vue的npm run dev和npm run build的區(qū)別介紹
這篇文章主要介紹了關(guān)于vue的npm run dev和npm run build的區(qū)別介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue項(xiàng)目在webpack2實(shí)現(xiàn)移動(dòng)端字體自適配功能
這篇文章主要介紹了vue項(xiàng)目在webpack2實(shí)現(xiàn)移動(dòng)端字體自適配的相關(guān)知識(shí)，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
仿照Element-ui實(shí)現(xiàn)一個(gè)簡(jiǎn)易的$message方法
這篇文章主要介紹了仿照Element-ui實(shí)現(xiàn)一個(gè)簡(jiǎn)易的$message方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
Vue的根路徑為什么不能作為跳板跳轉(zhuǎn)到其他頁(yè)面(問(wèn)題診斷及方案)
文章主要介紹了Vue應(yīng)用中路由配置錯(cuò)誤的診斷和解決方案,根路徑配置錯(cuò)誤和未正確使用`<router-view>`標(biāo)簽是常見(jiàn)的問(wèn)題,會(huì)導(dǎo)致路由參數(shù)無(wú)法正常傳遞,感興趣的朋友跟隨小編一起看看吧
2025-03-03