快捷導(dǎo)航

Vue使用formData格式類型上傳文件的示例

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

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

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

1.如圖片上傳，后端需要前端傳formData類型數(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ā)此事件
	// 作用就是打開文件上傳彈框
     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)求類型
     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格式類型上傳文件的文章就介紹到這了,更多相關(guān)Vue上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue獲取表單數(shù)據(jù)的多種方式
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下
2023-09-09
Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)(推薦)
這篇文章主要介紹了Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
輕量級(jí)富文本編輯器wangEditor結(jié)合vue使用方法示例
在我們項(xiàng)目中，有些時(shí)候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn)
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
詳解Vue路由開啟keep-alive時(shí)的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開啟keep-alive時(shí)的注意點(diǎn)，非常具有實(shí)用價(jià)值，有興趣的朋友可以了解一下
2017-06-06
vue實(shí)現(xiàn)鼠標(biāo)移入移出事件代碼實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移入移出事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue router動(dòng)態(tài)路由實(shí)現(xiàn)過(guò)程
Vue動(dòng)態(tài)路由(約定路由),聽(tīng)起來(lái)好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒(méi)有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下
2023-03-03
關(guān)于element-ui?select?下拉框位置錯(cuò)亂問(wèn)題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue+eslint+vscode配置教程
這篇文章主要介紹了vue+eslint+vscode配置教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08