104 lines
2.2 KiB
Vue
104 lines
2.2 KiB
Vue
<template>
|
||
<view class="upload-page">
|
||
<uni-section class="mb-10" title="视频上传" sub-title="支持大文件分片上传" type="line" />
|
||
|
||
<geek-uploadbox @upload="handleUpload" @delete="handleDelete" upload-text="选择视频文件"
|
||
upload-desc="支持 mp4/mov/avi 格式，最大 500M" />
|
||
|
||
<view class="upload-actions">
|
||
<button class="upload-btn" :disabled="!videoFile" @click="start">
|
||
{{ videoFile ? '开始上传' : '请先选择文件' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import modal from '@/plugins/modal'
|
||
import { chunkUpload } from '@/utils/ChunkUpload'
|
||
|
||
const videoFile = ref(null)
|
||
|
||
/**
|
||
* 处理视频上传
|
||
* @param {Object} data - 上传的视频数据
|
||
*/
|
||
const handleUpload = (data) => {
|
||
videoFile.value = data
|
||
}
|
||
|
||
/**
|
||
* 处理视频删除
|
||
*/
|
||
const handleDelete = () => {
|
||
videoFile.value = null
|
||
}
|
||
|
||
/**
|
||
* 校验上传参数
|
||
* @returns {boolean} 校验结果
|
||
*/
|
||
const validateParams = () => {
|
||
if (videoFile.value) return true
|
||
modal.msg('请先选择视频文件')
|
||
return false
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 开始上传
|
||
*/
|
||
const start = async () => {
|
||
if (!validateParams()) return
|
||
const result = await chunkUpload.upload({
|
||
file: videoFile.value,
|
||
onSuccess: () => {
|
||
modal.msgSuccess('上传成功')
|
||
},
|
||
onError: (error) => {
|
||
modal.msg(error)
|
||
}
|
||
});
|
||
return result
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.upload-page {
|
||
min-height: 100vh;
|
||
background-color: #f6f6f6;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.upload-actions {
|
||
margin-top: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #1976d2, #42a5f5);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
|
||
&:not(:disabled):active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.3);
|
||
}
|
||
|
||
&:disabled {
|
||
background: #cccccc;
|
||
color: #999999;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
</style>
|