vue图片与表单一起上传例子
时间: 2023-09-13 15:04:27 浏览: 53
以下是一个使用 Vue.js 实现图片与表单一起上传的例子:
HTML 代码:
```html
<div id="app">
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" v-model="name"/>
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" v-model="email"/>
</div>
<div>
<label for="avatar">Avatar:</label>
<input type="file" id="avatar" @change="handleAvatarChange"/>
<img :src="avatarPreview" v-if="avatarPreview" />
</div>
<button type="submit" @click.prevent="handleSubmit">Submit</button>
</form>
</div>
```
JavaScript 代码:
```js
new Vue({
el: '#app',
data: {
name: '',
email: '',
avatar: null,
avatarPreview: null
},
methods: {
handleAvatarChange(e) {
const file = e.target.files[0];
this.avatar = file;
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
this.avatarPreview = e.target.result;
};
},
handleSubmit() {
const formData = new FormData();
formData.append('name', this.name);
formData.append('email', this.email);
formData.append('avatar', this.avatar);
axios.post('/api/user', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
});
```
在这个例子中,我们使用了 HTML5 的 `FormData` 对象来构建表单数据,然后使用 Axios 库发送 POST 请求到服务端。当用户选择图片文件后,我们通过 `FileReader` 对象将图片预览到页面上。