Vue.js 是一個基于 MVVM 模式的漸進式框架,允許開發者構建數據驅動的 Web 應用。其中,Vue 中對于表單數據的處理涉及到 FormData 處理方式。
FormData 為 Web API,它為表單數據的編碼和解析提供了便利,可實現異步數據傳輸等操作。Vue 作為前端框架,也可以使用 FormData 作為數據處理方式。
<template> <div> <form @submit.prevent="add" enctype="multipart/form-data"> <div> <input type="text" placeholder="Title" v-model="title" /> </div> <div> <input type="file" name="file" @change="handleFileUpload" /> </div> <button type="submit">Submit</button> </form> </div> </template> <script> export default { data() { return { title: '', file: null } }, methods: { handleFileUpload(e) { this.file = e.target.files[0]; }, async add() { const formData = new FormData(); formData.append('title', this.title); formData.append('file', this.file); await axios.post('/api/add', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); } } } </script>
在上述示例中,使用 Vue 實現表單提交的功能。需要注意三個關鍵點:
- enctype 值應設為 multipart/form-data
- 文件應通過 @change 事件處理函數 handleFileUpload 獲取
- 表單數據應通過 FormData 方式作為請求體進行傳輸
在 add 方法中,使用 Axios 發起異步請求,FormData 作為參數傳遞。在 headers 中,需指定 Content-Type 為 multipart/form-data,這樣后端服務器可以正確解析請求體。