JS FormData上傳文件的設(shè)置方法
使用FormData上傳文件時,總是獲取不到req.file對象。發(fā)現(xiàn)是沒有配置對FormData導(dǎo)致。
這里我是在vue中使用axios發(fā)送的請求,配置代碼如下。重點(diǎn)地方給出注釋
<form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform">
<input type="file" name="imagefile" @change="upload" ref="inputfile">
</form>
let uploadform = this.$refs.uploadform
let inputfile = this.$refs.inputfile
let formData = new FormData(uploadform) //初始化時將form Dom對象傳入
formData.append('imagefile', inputfile) //將imagefile鍵追加進(jìn)去,值為input-file的dom對象,否則服務(wù)端無法獲取file
this.$http.post(this.postImgApi, formData, {
headers: {
'Content-Type': 'multipart/form-data' //設(shè)置post文件的請求頭
}
}).then(res => {
debugger
this.textarea = res.data
})
這兩天也是從網(wǎng)上找了各種demo和資料,發(fā)現(xiàn)使用自己的請求是后臺就是獲取不到文件,而使用form表單的submit卻是可以。最開始分析是否是自己的請求頭的問題,發(fā)現(xiàn)content-type正確且?guī)в衎oundary,content-length也正常,說明請求頭這里應(yīng)該是沒問題的。所以從FormData這里入手,幾次嘗試后尋找到上面代碼的方式可以正常運(yùn)行。這里后面有時間還是要詳細(xì)分析下FormData,好好學(xué)習(xí)下在給出深度的解釋。
以上所述是小編給大家介紹的JS FormData上傳文件的設(shè)置方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動的方法,涉及javascript結(jié)合時間函數(shù)與數(shù)學(xué)運(yùn)算動態(tài)操作頁面元素樣式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
JS使用canvas實(shí)現(xiàn)基本的截圖功能
這篇文章主要給大家介紹了使用JS中的canvas實(shí)現(xiàn)基本的截圖功能,文中有詳細(xì)的實(shí)現(xiàn)思路和實(shí)現(xiàn)過程,文章通過代碼示例講解的非常詳細(xì),很感興趣的同學(xué)可以參考一下2023-08-08
JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-06-06
JS+CSS實(shí)現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法,實(shí)例分析了div彈出層窗口的實(shí)現(xiàn)技巧,非常具有實(shí)用價值,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
JavaScript如何實(shí)現(xiàn)在線預(yù)覽HTML文件功能
實(shí)現(xiàn)瀏覽器在線預(yù)覽文件的方法有很多種,這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)在線預(yù)覽HTML文件功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-05-05
JavaScript清空數(shù)組元素的兩種方法簡單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡單比較,羅列了幾種常見的情況javascript數(shù)組的方法,并且比較了其中的兩種常見方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
淺談layui 綁定form submit提交表單的注意事項(xiàng)
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項(xiàng),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10

