使用vue上传多个文件
时间: 2023-10-26 20:07:38 浏览: 41
可以使用vue-upload-component组件来实现上传多个文件。以下是一个简单的示例:
1. 安装vue-upload-component组件
```bash
npm install vue-upload-component --save
```
2. 在Vue组件中引入vue-upload-component
```js
import UploadComponent from 'vue-upload-component'
export default {
components: {
UploadComponent
},
data() {
return {
files: []
}
},
methods: {
uploadSuccess(file, response) {
console.log('File uploaded: ', file)
console.log('Response: ', response)
}
}
}
```
3. 在Vue组件中使用vue-upload-component
```html
<template>
<div>
<upload-component :multiple="true" :url="uploadUrl" :headers="headers" :data="formData" @upload-success="uploadSuccess"></upload-component>
</div>
</template>
```
在上面的代码中,我们将multiple属性设置为true,允许上传多个文件。uploadUrl属性指定上传文件的URL,headers属性可以包含任何你想要发送到服务器的头信息,formData属性是一个对象,它包含任何你想要发送到服务器的额外数据。
@upload-success事件将在文件上传成功时触发,它会接收上传的文件和服务器的响应作为参数。你可以根据需要处理响应数据。
这就是一个简单的示例,你可以根据需要调整代码。