快捷導(dǎo)航

Vue使用formData格式類(lèi)型上傳文件的示例

更新時(shí)間：2021年09月03日 16:24:42 作者：Web_chicken

這篇文章主要介紹了Vue使用formData格式類(lèi)型上傳文件的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在vue中，我們普遍是前后端分離項(xiàng)目，即需要使用axios等工具向后臺(tái)發(fā)送請(qǐng)求實(shí)現(xiàn)對(duì)數(shù)據(jù)的操作。
其中，文件上傳算是比較難的一種。這篇文章五分鐘教會(huì)你上傳文件。

1.如圖片上傳，后端需要前端傳formData類(lèi)型數(shù)據(jù)的情況下

<el-button type="primary"  @click="uploadFile2()">點(diǎn)擊上傳</el-button>
 <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">

我們使用原生input的方式來(lái)實(shí)現(xiàn)。

uploadFile2(){
	// 當(dāng)點(diǎn)擊button按鈕后會(huì)觸發(fā)此事件
	// 作用就是打開(kāi)文件上傳彈框
     this.$refs.uploadFile2.click()
   },
   fileValueChange2(){
   // 選中文件后，會(huì)觸發(fā)input的change事件，即會(huì)進(jìn)入此函數(shù)
     var formData = new FormData()
     // this.$refs.uploadFile2是vue中獲取dom元素的方法
     // 通過(guò)files就可以拿到所有上傳的文件，如果是多個(gè)文件循環(huán)即可
     formData.append( 'file',this.$refs.uploadFile2.files[0])
     // 必須設(shè)置請(qǐng)求類(lèi)型
     formData.append( 'type', "head");
     // 如果需要傳id的情況下，參考下面代碼
     formData.append( 'id', this.id);
     // 配置完成后，只需要向后臺(tái)傳入formData 變量即可
     insertNavigationUpload(formData).then(res=>{
       console.log（'簡(jiǎn)單嗎？老鐵'）
     })
   },

差點(diǎn)忘記一步,axios請(qǐng)求二次封裝我就不多說(shuō)了，這里只展示下接口

export const tMessageNotification = data =>{
  return request({
    url:'/tMessageNotification/upload',
    method: 'POST',
    data,
    headers: {'Content-Type': 'application/json'},
  })
}

到此這篇關(guān)于Vue使用formData格式類(lèi)型上傳文件的文章就介紹到這了,更多相關(guān)Vue上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
Vuex 快速入門(mén)(簡(jiǎn)單易懂)
這篇文章主要介紹了Vuex 快速入門(mén)(簡(jiǎn)單易懂)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法
這篇文章主要介紹了用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決
這篇文章主要介紹了Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下
2022-07-07
$解決vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問(wèn)題$
解決vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問(wèn)題
這篇文章主要介紹了vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類(lèi)問(wèn)題的原因所在并給出解決方法，需要的朋友可以參考下
2022-09-09
vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue在外部方法給下拉框賦值后不顯示label的解決
這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10