您好,登錄后才能下訂單哦!
很多時候在使用form向后臺發(fā)送數(shù)據(jù)的時候,并不需要使用到表單組件。
例如時間戳、ip等,這個時候除了ajax之外,還可以使用HTML5的一個全新方法FormData;在input[type = file]的文件類型中,很多時候想要把一張圖片或者是使用canvas繪制好的圖像傳送到后臺時,無法賦值給file文件,只能轉(zhuǎn)換為base64類型傳送到后臺,然后由后臺轉(zhuǎn)換為圖片再進(jìn)行服務(wù)器存儲;此過程較為復(fù)雜;
使用formdata,只需創(chuàng)建新的formdata對象,將要發(fā)送的數(shù)據(jù)添加進(jìn)去,后臺即可接收;數(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) // 服務(wù)器錯誤 調(diào)用對應(yīng)函數(shù) 函數(shù)需自己定義,此處后面省略 }
2. 美化 input file 按鈕 (拓展)
思路:
以上思路可以實(shí)現(xiàn)點(diǎn)擊用戶頭像,通過表單上傳更換頭像,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。