vue怎么实现视频上传
实现视频上传功能
在Vue中实现视频上传功能通常需要结合HTML5的<input type="file">元素和后端API。以下是实现方法：
前端实现
创建文件上传组件模板：
<template>
<div>
<input type="file" accept="video/*" @change="handleFileUpload"/>
<button @click="uploadVideo">上传视频</button>
<div v-if="progress > 0">上传进度: {{progress}}%</div>
</div>
</template>处理文件选择和上传逻辑：
<script>
export default {
data() {
return {
selectedFile: null,
progress: 0
}
},
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
},
async uploadVideo() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('video', this.selectedFile)
try {
const response = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
this.progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
})
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
}
}
}
}
</script>后端处理
Node.js示例（使用Express和multer）：
const express = require('express')
const multer = require('multer')
const app = express()
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname)
}
})
const upload = multer({ storage: storage })
app.post('/api/upload', upload.single('video'), (req, res) => {
res.json({
message: '文件上传成功',
file: req.file
})
})
app.listen(3000, () => {
console.log('服务器运行在3000端口')
})功能扩展
添加视频预览功能：
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
this.previewVideo()
},
previewVideo() {
const videoURL = URL.createObjectURL(this.selectedFile)
this.$refs.videoPlayer.src = videoURL
}
}<video ref="videoPlayer" controls style="max-width: 100%"></video>文件限制
添加文件大小和类型验证：
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
const validTypes = ['video/mp4', 'video/webm', 'video/ogg']
const maxSize = 100 * 1024 * 1024 // 100MB
if (!validTypes.includes(file.type)) {
alert('请上传有效的视频文件')
return
}
if (file.size > maxSize) {
alert('文件大小不能超过100MB')
return
}
this.selectedFile = file
}
}进度条优化
使用第三方UI库美化进度显示：
<el-progress :percentage="progress" v-if="progress > 0"></el-progress>以上实现涵盖了视频上传的基本功能，包括文件选择、上传进度显示、前端验证和后端接收处理。根据实际需求，可以进一步扩展如断点续传、分片上传等高级功能。
