2023-12-22 - ???? element-upload 使用axios 代理上傳

element-upload赁项,涉及到跨域上傳纫雁,需要使用http-request自定義上傳

 <el-upload
            action="#" // 修改為#
            :http-request="hanldeUploadFile"
            class="mr-10"
            :show-file-list="false"
            :on-exceed="handleExceed"
          >
            <el-button
              type="primary"
              :icon="UploadFilled"
              @click="handleRefresh"
              >上傳</el-button
            >
</el-upload>

上傳函數(shù)

function hanldeUploadFile(param) {
  // 上傳請求頭為:uploadFile:binary
  // 格式 a=123&c=456
  // 只有 FormData 可以傳輸二進(jìn)制文件流
  const formData = new FormData(); 
  formData.append('uploadFile', param.file);
  getPathToExcel(formData).then(res => {
    console.log(res);
  });
}

api 記得添加 header Content-Type

export function getPathToExcel(data) {
  return http.post(`/GLuserCode/logins/getPathToExcel`, data, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
}

axios 封裝

import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus';

const service: AxiosInstance = axios.create({
  withCredentials: false,
  timeout: 50000,
  // baseURL: import.meta.env.VITE_APP_BASE_API,
});

service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    console.log(config, 'interceptors');
    return config;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response: AxiosResponse) => {
    const res = response.data;
    if (res.res !== 1) {
      ElMessage.error(res.resMsg || 'Error');
      return Promise.reject(res.resMsg || 'Error');
    } else {
      return res;
    }
  },
  (error: AxiosError) => {
    console.log(`err${error}`);
    ElMessage.error(error.message || 'Error');
    return Promise.reject(error.message);
  }
);

export const http = {
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return service.get(url);
  },
  post<T = any>(
    url: string,
    data?: object,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return service.post(url, data, config);
  },
};

export default service;

vite.config.ts配置跨域請求配置

   server: {
      /** 是否開啟 HTTPS */
      https: false,
      /** 設(shè)置 host: true 才可以使用 Network 的形式请梢,以 IP 訪問項(xiàng)目 */
      host: true, // host: "0.0.0.0"
      /** 端口號 */
      port: 3333,
      /** 是否自動打開瀏覽器 */
      open: false,
      /** 跨域設(shè)置允許 */
      cors: true,
      /** 端口被占用時(shí),是否直接退出 */
      strictPort: false,
      /** 接口代理 */
      proxy: {
        '/GLuserCode': {
          target: 'http://10.1.81.45:9080/pf3/GLuserCode/',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/GLuserCode/, ''),
        },
      },
    },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奈偏,一起剝皮案震驚了整個(gè)濱河市后室,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌独撇,老刑警劉巖屑墨,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異纷铣,居然都是意外死亡卵史,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門搜立,熙熙樓的掌柜王于貴愁眉苦臉地迎上來以躯,“玉大人,你說我怎么就攤上這事啄踊∮巧瑁” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵颠通,是天一觀的道長址晕。 經(jīng)常有香客問我,道長蒜哀,這世上最難降的妖魔是什么斩箫? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮撵儿,結(jié)果婚禮上乘客,老公的妹妹穿的比我還像新娘。我一直安慰自己淀歇,他們只是感情好易核,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著浪默,像睡著了一般牡直。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纳决,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天碰逸,我揣著相機(jī)與錄音,去河邊找鬼阔加。 笑死饵史,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的胜榔。 我是一名探鬼主播胳喷,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼夭织!你這毒婦竟也來了吭露?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤尊惰,失蹤者是張志新(化名)和其女友劉穎讲竿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體弄屡,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡戴卜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了琢岩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片投剥。...
    茶點(diǎn)故事閱讀 39,779評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖担孔,靈堂內(nèi)的尸體忽然破棺而出江锨,到底是詐尸還是另有隱情,我是刑警寧澤糕篇,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布啄育,位于F島的核電站,受9級特大地震影響拌消,放射性物質(zhì)發(fā)生泄漏挑豌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望氓英。 院中可真熱鬧侯勉,春花似錦、人聲如沸铝阐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽徘键。三九已至练对,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吹害,已是汗流浹背螟凭。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留它呀,地道東北人赂摆。 一個(gè)月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像钟些,于是被迫代替她去往敵國和親烟号。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容