用vue写一个文档上传
时间: 2024-05-04 17:16:49 浏览: 7
好的,下面是一个简单的 Vue 组件,可以实现文档上传功能:
```
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="submitFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
submitFile() {
const formData = new FormData();
formData.append("file", this.file);
// 发送文件到服务器
axios.post("/upload", formData).then(response => {
console.log(response.data);
});
}
}
};
</script>
```
这个组件包含一个 `<input>` 元素,用于选择文件,以及一个上传按钮。当用户选择了文件后,`handleFileUpload` 方法会将文件保存在组件的 `file` 数据属性中。当用户点击上传按钮时,`submitFile` 方法会将文件发送到服务器。这里使用了 axios 库来发送 HTTP 请求,你需要在项目中引入 axios 库才能正常运行。在实际开发中,你需要根据自己的需求来修改这个组件。