欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決axios發(fā)送post請求上傳文件到后端的問題(multipart/form-data)

 更新時(shí)間:2022年05月21日 09:46:51   作者:AmbitiousJun  
這篇文章主要介紹了如何使用axios發(fā)送post請求上傳文件到后端(multipart/form-data),本文給大家?guī)砹藛栴}原因及解決方案,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目場景:

后端:實(shí)現(xiàn)了一個(gè)文件上傳服務(wù)接口,可以接收前端傳遞過來的MultipartFile文件,并存儲(chǔ)到服務(wù)器本地中。
前端:獲取typefile<font>標(biāo)簽中的文件,使用axioshttp請求庫,發(fā)送post請求,將文件發(fā)送給后端。

問題描述

在js中發(fā)送上傳文件請求的常規(guī)代碼如下:

  • new一個(gè)FormData對象,使用append方法將文件添加到表單中
  • FormData專門用于js中發(fā)送multipart/form-data格式請求
  • append方法的key為表單中的name屬性,即后端需要接收的參數(shù)名
async handleUploadFile(event) {
  const file = event.target.files[0]
  let formData = new FormData()
  formData.append('files', file)
  const res = await service({
    url: '/api/files/upload',
    method: 'POST',
    headers: {
       'Content-Type': 'multipart/form-data'
    },
    data: formData
  })
  console.log(res.data);
}

實(shí)際運(yùn)行以上這段代碼時(shí),會(huì)發(fā)現(xiàn)后端報(bào)500錯(cuò)誤如下:

Caused by: java.io.IOException:
org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

大概的意思是說,后端無法識別到傳遞來的文件中的boundary,從而無法區(qū)分一個(gè)文件的內(nèi)容從報(bào)文的哪個(gè)地方開始,又從報(bào)文的哪個(gè)地方結(jié)束,最終導(dǎo)致文件上傳失敗。

原因分析:

分析以上這種情況的原因,是因?yàn)槲以诎l(fā)送請求時(shí)將請求頭中Content-Type屬性給寫死為multipart/form-data,瀏覽器無法自動(dòng)給我們的報(bào)文添加boundary

我嘗試將前端請求config中,headers配置移除,如下:

async handleUploadFile(event) {
  const file = event.target.files[0]
  let formData = new FormData()
  formData.append('files', file)
  const res = await service({
    url: '/api/files/upload',
    method: 'POST',
    data: formData
  })
  console.log(res.data);
}

再次發(fā)送請求,這次仍然沒有請求成功。服務(wù)器沒有報(bào)錯(cuò)了,但是后端獲取不到文件數(shù)據(jù)。繼續(xù)分析請求報(bào)文,發(fā)現(xiàn)屬性值變?yōu)?code>application/x-www-form-urlencoded,這是發(fā)送普通的表單,肯定是無法正確將文件送達(dá)的。

解決方案:

在查閱了網(wǎng)上大量的帖子之后得知,axios在請求發(fā)送出去之前會(huì)進(jìn)行一次攔截,自動(dòng)給我們的請求設(shè)置一些參數(shù)。上面會(huì)出現(xiàn)application/x-www-form-urlencoded這個(gè)參數(shù)就是因?yàn)?code>axios設(shè)置了post請求的默認(rèn)請求頭,如果我們沒有在config中指定其它請求頭的話,就會(huì)使用默認(rèn)的。

又了解到,發(fā)送multipart/form-data格式的請求時(shí),不需要我們自己指定Content-Type屬性,由瀏覽器自動(dòng)幫我們?nèi)ピO(shè)置。

那么解決問題的關(guān)鍵就是不讓axios幫我們自動(dòng)配置

axiosconfig中有一個(gè)transformRequest屬性,官方的解釋是可以在請求發(fā)送之前讓我們?nèi)藶楦深A(yù)。屬性值是一個(gè)數(shù)組,里面可以定義一個(gè)函數(shù),接收兩個(gè)參數(shù),分別是dataheaders。data就是我們剛剛定義的FormData對象,headers里面則是axios預(yù)定義的請求頭。

打印headers

headers對象中的屬性

post屬性中的Content-Type屬性刪掉即可解決問題。

最終代碼如下:

async handleUploadFile(event) {
  const file = event.target.files[0]
  let formData = new FormData()
  formData.append('files', file)
  const res = await service({
    url: '/api/files/upload',
    method: 'POST',
    transformRequest: [function(data, headers) {
      // 去除post請求默認(rèn)的Content-Type
      delete headers.post['Content-Type']
      return data
    }],
    data: formData
  })
  console.log(res.data);
}

以上的解決方法是我不斷試錯(cuò)之后得出來的,網(wǎng)上關(guān)于這個(gè)問題的很多帖子都不能解決,氣死我了。。。希望這篇帖子能幫助大家避免踩這個(gè)坑吧~

到此這篇關(guān)于如何使用axios發(fā)送post請求上傳文件到后端(multipart/form-data)的文章就介紹到這了,更多相關(guān)axios發(fā)送post請求上傳文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用Vue做一個(gè)簡單的todo應(yīng)用的三種方式的示例代碼

    使用Vue做一個(gè)簡單的todo應(yīng)用的三種方式的示例代碼

    這篇文章主要介紹了使用Vue做一個(gè)簡單的todo應(yīng)用的三種方式的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue.js動(dòng)態(tài)設(shè)置VueComponent高度遇到的問題及解決

    vue.js動(dòng)態(tài)設(shè)置VueComponent高度遇到的問題及解決

    這篇文章主要介紹了vue.js動(dòng)態(tài)設(shè)置VueComponent高度遇到的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 使用vue 國際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語言切換功能

    使用vue 國際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語言切換功能

    這篇文章主要介紹了使用vue 國際化i18n 多實(shí)現(xiàn)語言切換功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-10-10
  • vue+socket.io+express+mongodb 實(shí)現(xiàn)簡易多房間在線群聊示例

    vue+socket.io+express+mongodb 實(shí)現(xiàn)簡易多房間在線群聊示例

    本篇文章主要介紹了vue+socket.io+express+mongodb 實(shí)現(xiàn)簡易多房間在線群聊示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
    2017-10-10
  • Vue.js?中的父子組件通信方式實(shí)例教程

    Vue.js?中的父子組件通信方式實(shí)例教程

    在 Vue.js 中,父子組件通信是非常重要的,在本文中,我們討論了 Vue.js 中父子組件通信的幾種方式,包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問子組件實(shí)例以及使用 $children 和 $parent 訪問父子組件實(shí)例
    2023-09-09
  • vue中使用moment設(shè)置倒計(jì)時(shí)的方法

    vue中使用moment設(shè)置倒計(jì)時(shí)的方法

    這篇文章給大家介紹了vue中使用moment設(shè)置倒計(jì)時(shí)的方法,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-02-02
  • el-upload?文件上傳組件的使用講解

    el-upload?文件上傳組件的使用講解

    Upload?上傳文件這個(gè)功能是我們在企業(yè)實(shí)際開發(fā)當(dāng)中使用頻率是非常高的這樣一個(gè)文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法

    vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法

    這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開新頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue3項(xiàng)目搭建的詳細(xì)過程記錄

    Vue3項(xiàng)目搭建的詳細(xì)過程記錄

    使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過程,需要的朋友可以參考下
    2022-10-10
  • 從0到1構(gòu)建vueSSR項(xiàng)目之node以及vue-cli3的配置

    從0到1構(gòu)建vueSSR項(xiàng)目之node以及vue-cli3的配置

    這篇文章主要介紹了從0到1構(gòu)建vueSSR項(xiàng)目之node以及vue-cli3的配置,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03

最新評論