vue 实现视频上传
视频上传功能实现
在Vue中实现视频上传功能需要结合前端和后端的协作。以下是详细的实现方法：
前端实现
创建文件上传组件，使用<input type="file">元素：
<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>后端API实现
Node.js Express示例：
const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
const upload = multer({
dest: 'uploads/',
limits: {
fileSize: 100 * 1024 * 1024 // 限制100MB
}
})
app.post('/api/upload', upload.single('video'), (req, res) => {
if (!req.file) {
return res.status(400).send('没有上传文件')
}
// 这里可以添加文件验证逻辑
const allowedTypes = ['video/mp4', 'video/webm']
if (!allowedTypes.includes(req.file.mimetype)) {
return res.status(400).send('不支持的文件类型')
}
res.json({
message: '文件上传成功',
filename: req.file.filename,
path: req.file.path
})
})
app.listen(3000, () => console.log('服务器启动'))文件验证和限制
前端验证文件类型和大小：
handleFileUpload(event) {
const file = event.target.files[0]
const maxSize = 100 * 1024 * 1024 // 100MB
if (!file.type.includes('video/')) {
alert('请选择视频文件')
return
}
if (file.size > maxSize) {
alert('文件太大，最大支持100MB')
return
}
this.selectedFile = file
}进度显示优化
使用进度条组件增强用户体验：
<progress :value="progress" max="100"></progress>
<span v-if="progress > 0 && progress < 100">{{progress}}%</span>
<span v-else-if="progress === 100">上传完成!</span>断点续传实现
对于大文件上传，实现分片上传：
async uploadLargeVideo() {
const chunkSize = 5 * 1024 * 1024 // 5MB每片
const chunks = Math.ceil(this.selectedFile.size / chunkSize)
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize
const end = Math.min(start + chunkSize, this.selectedFile.size)
const chunk = this.selectedFile.slice(start, end)
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('chunkIndex', i)
formData.append('totalChunks', chunks)
formData.append('filename', this.selectedFile.name)
await axios.post('/api/upload-chunk', formData, {
headers: {'Content-Type': 'multipart/form-data'}
})
this.progress = Math.round(((i + 1) / chunks) * 100)
}
await axios.post('/api/merge-chunks', {
filename: this.selectedFile.name,
totalChunks: chunks
})
}视频预览功能
上传前预览视频：
<video v-if="videoUrl" :src="videoUrl" controls width="300"></video>handleFileUpload(event) {
const file = event.target.files[0]
this.selectedFile = file
this.videoUrl = URL.createObjectURL(file)
}错误处理和重试机制
添加错误处理和自动重试：
async uploadWithRetry(formData, retries = 3) {
try {
return await axios.post('/api/upload', formData, {
headers: {'Content-Type': 'multipart/form-data'}
})
} catch (error) {
if (retries > 0) {
return this.uploadWithRetry(formData, retries - 1)
}
throw error
}
}文件大小转换
格式化显示文件大小：
formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes'
const k = 1024
const sizes = ['Bytes', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}上传限制提示
显示上传限制信息：
<p>支持格式: MP4, WebM</p>
<p>最大文件大小: {{formatFileSize(100 * 1024 * 1024)}}</p>这些方法提供了完整的视频上传解决方案，可以根据实际需求进行调整和扩展。
