我需要一个vue 上传文件 的列表组件
时间: 2023-11-17 21:06:05 浏览: 59
你可以使用Vue.js和HTML5的FormData和XMLHttpRequest API来实现Vue上传文件的列表组件。以下是一个简单的示例:
```
<template>
<div>
<form>
<input type="file" ref="fileInput" @change="handleFileUpload">
</form>
<ul>
<li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleFileUpload() {
const files = this.$refs.fileInput.files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('file[]', files[i]);
this.fileList.push(files[i]);
}
// 发送文件到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
}
}
};
</script>
```
在上面的代码中,我们首先定义了一个包含一个文件上传表单和一个上传列表的Vue组件。当用户选择文件并上传时,我们使用FormData对象将文件添加到表单数据中,并将文件添加到我们的上传列表中。然后,我们使用XMLHttpRequest对象将表单数据发送到服务器。
如果你需要在上传期间显示进度条或者处理上传失败的情况,你可以使用XMLHttpRequest提供的事件来实现这些功能。
阅读全文