JS FormData上傳文件的設置方法
更新時間：2017年07月05日 09:41:03 作者：qq451354
使用FormData上傳文件時，總是獲取不到req.file對象。發(fā)現(xiàn)是沒有配置對FormData導致的，怎么解決這個問題呢？下面小編給大家?guī)砹薐S FormData上傳文件的設置方法，需要的朋友參考下吧
使用FormData上傳文件時，總是獲取不到req.file對象。發(fā)現(xiàn)是沒有配置對FormData導致。
這里我是在vue中使用axios發(fā)送的請求，配置代碼如下。重點地方給出注釋
<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鍵追加進去，值為input-file的dom對象，否則服務端無法獲取file
this.$http.post(this.postImgApi, formData, {
headers: {
'Content-Type': 'multipart/form-data' //設置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也正常，說明請求頭這里應該是沒問題的。所以從FormData這里入手，幾次嘗試后尋找到上面代碼的方式可以正常運行。這里后面有時間還是要詳細分析下FormData，好好學習下在給出深度的解釋。
以上所述是小編給大家介紹的JS FormData上傳文件的設置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)勻加速與勻減速運動的方法,涉及javascript結(jié)合時間函數(shù)與數(shù)學運算動態(tài)操作頁面元素樣式的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
下面小編就為大家?guī)硪黄狫avaScript 函數(shù)的執(zhí)行過程。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要給大家介紹了使用JS中的canvas實現(xiàn)基本的截圖功能,文中有詳細的實現(xiàn)思路和實現(xiàn)過程,文章通過代碼示例講解的非常詳細,很感興趣的同學可以參考一下2023-08-08
JavaScript實現(xiàn)文本目標字符替換和一鍵全部替換
這篇文章主要介紹了JavaScript實現(xiàn)文本目標字符替換和一鍵全部替換，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
JS+CSS實現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法
這篇文章主要介紹了JS+CSS實現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法,實例分析了div彈出層窗口的實現(xiàn)技巧,非常具有實用價值,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
中文逗號如何轉(zhuǎn)英文，下面為大家詳細介紹下，感興趣的朋友不要錯過2014-02-02
JavaScript如何實現(xiàn)在線預覽HTML文件功能
實現(xiàn)瀏覽器在線預覽文件的方法有很多種,這篇文章主要介紹了JavaScript如何實現(xiàn)在線預覽HTML文件功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-05-05
這篇文章主要介紹了uniApp實現(xiàn)選擇時間功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
JavaScript清空數(shù)組元素的兩種方法簡單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡單比較,羅列了幾種常見的情況javascript數(shù)組的方法,并且比較了其中的兩種常見方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
淺談layui 綁定form submit提交表單的注意事項
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10