Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)
更新時間：2019年04月14日 09:57:39 作者：邢走在云端
這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
很多時候在使用form向后臺發(fā)送數(shù)據(jù)的時候，并不需要使用到表單組件。
例如時間戳、ip等，這個時候除了ajax之外，還可以使用HTML5的一個全新方法FormData；在input[type = file]的文件類型中，很多時候想要把一張圖片或者是使用canvas繪制好的圖像傳送到后臺時，無法賦值給file文件，只能轉換為base64類型傳送到后臺，然后由后臺轉換為圖片再進行服務器存儲；此過程較為復雜；
使用formdata，只需創(chuàng)建新的formdata對象，將要發(fā)送的數(shù)據(jù)添加進去，后臺即可接收；數(shù)據(jù)以及文件對象皆可；
1. 基本使用方式
template
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
JavaScript
update (e) {
let file = e.target.files[0]
// console.log(file)
let param = new FormData() // 創(chuàng)建form對象
param.append('file', file, file.name) // 通過append向form對象添加數(shù)據(jù)
param.append('id', this.$store.state.userId) // 添加form表單中其他數(shù)據(jù)
// withCredentials: true 使得后臺可以接收表單數(shù)據(jù) 跨域請求
const instance = axios.create({
withCredentials: true
})
// url為后臺接口
instance.post('url', param)
.then(this.succ) // 成功返回信息 調(diào)用函數(shù) 函數(shù)需自己定義，此處后面省略
.catch(this.serverError) // 服務器錯誤 調(diào)用對應函數(shù) 函數(shù)需自己定義，此處后面省略
}
2. 美化 input file 按鈕 （拓展）
思路：
- 簡單粗暴地隱藏：opacity: 0;
- 在 <input class="file"> 元素節(jié)點的位置上創(chuàng)建一個好看的元素節(jié)點,比如img
- 將 <input class="file"> 元素的z軸變高，使得其覆蓋<img/> :z-index: 5;
- 因為 <input class="file"> 是透明的，那么我們就只看見它同xy上的好看的<img />
- 點擊這個好看的<img /> 其實是點擊了它上層的表單
以上思路可以實現(xiàn)點擊用戶頭像，通過表單上傳更換頭像，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue使用路由的query配置項時清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項時如何清除地址欄的參數(shù)，本文通過案例給大家分享完美解決方案,需要的朋友可以參考下2023-09-09
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家詳細介紹了Proxy中代理數(shù)據(jù)攔截的方法，文中的示例代碼講解詳細，對我們學習或工作具有一定的借鑒價值，需要的可以參考一下2022-12-12
Vue+axios實現(xiàn)統(tǒng)一接口管理的方法
這篇文章主要介紹了Vue+axios實現(xiàn)統(tǒng)一接口管理的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
Vue3+Element-plus項目自動導入報錯的解決方案
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關于Vue3+Element-plus項目自動導入報錯的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)跑馬燈樣式文字橫向滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了詳解使用VueJS開發(fā)項目中的兼容問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11