vue上传多个图片和视频
时间: 2024-03-23 18:36:02 浏览: 18
在Vue中上传多个图片和视频可以使用第三方库或原生的表单上传方式。
1. 使用第三方库:可以使用插件如vue-dropzone、vue2-multi-uploader等,这些插件提供了方便的UI和上传功能,可以轻松实现多文件上传。
2. 原生表单上传方式:使用原生的表单上传方式,可以通过以下步骤实现多文件上传:
- 在模板中添加一个表单元素,设置enctype为multipart/form-data。
- 添加一个文件输入域,设置multiple属性以允许多个文件上传。
- 在表单提交时使用FormData对象,将所有文件数据添加到FormData中。
- 使用axios、jQuery等库进行异步上传。
示例代码如下:
```html
<template>
<div>
<form enctype="multipart/form-data" @submit.prevent="submitForm">
<input type="file" name="files[]" multiple>
<button type="submit">上传</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
submitForm() {
const formData = new FormData()
const files = document.querySelector('input[type=file]').files
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i])
}
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data)
})
}
}
}
</script>
```