溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
很多時候在使用form向后臺發送數據的時候，并不需要使用到表單組件。
例如時間戳、ip等，這個時候除了ajax之外，還可以使用HTML5的一個全新方法FormData；在input[type = file]的文件類型中，很多時候想要把一張圖片或者是使用canvas繪制好的圖像傳送到后臺時，無法賦值給file文件，只能轉換為base64類型傳送到后臺，然后由后臺轉換為圖片再進行服務器存儲；此過程較為復雜；
使用formdata，只需創建新的formdata對象，將要發送的數據添加進去，后臺即可接收；數據以及文件對象皆可；
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() // 創建form對象
param.append('file', file, file.name) // 通過append向form對象添加數據
param.append('id', this.$store.state.userId) // 添加form表單中其他數據
// withCredentials: true 使得后臺可以接收表單數據 跨域請求
const instance = axios.create({
withCredentials: true
})
// url為后臺接口
instance.post('url', param)
.then(this.succ) // 成功返回信息 調用函數 函數需自己定義，此處后面省略
.catch(this.serverError) // 服務器錯誤 調用對應函數 函數需自己定義，此處后面省略
}
2. 美化 input file 按鈕 （拓展）
思路：
以上思路可以實現點擊用戶頭像，通過表單上傳更換頭像，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
