Browse Source

feat(视频上传): 添加视频时长验证并优化上传提示

在视频上传功能中添加时长验证逻辑,限制视频不超过1分钟
修改上传提示文本,明确显示时长和数量限制
为不同平台(微信小程序、APP、H5)实现视频时长检测
master
前端-胡立永 1 month ago
parent
commit
1af0319076
2 changed files with 119 additions and 11 deletions
  1. +60
    -6
      pages_subpack/house/farmhouse.vue
  2. +59
    -5
      pages_subpack/house/other.vue

+ 60
- 6
pages_subpack/house/farmhouse.vue View File

@ -78,7 +78,7 @@
<!-- 8. 房屋视频 --> <!-- 8. 房屋视频 -->
<uv-form-item label="房屋视频" labelWidth="250" prop="videos" labelPosition="top" required> <uv-form-item label="房屋视频" labelWidth="250" prop="videos" labelPosition="top" required>
<view class="upload-tip">请上传房屋内部和外部视频1分钟内</view>
<view class="upload-tip">请上传房屋内部和外部视频时长不超过1分钟最多上传2个视频</view>
<uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1" <uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1"
multiple :maxCount="2"></uv-upload> multiple :maxCount="2"></uv-upload>
</uv-form-item> </uv-form-item>
@ -359,12 +359,66 @@
// //
async afterVideoRead(e) { async afterVideoRead(e) {
let self = this let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
for (let file of e.file) {
try {
//
const duration = await this.getVideoDuration(file.url)
if (duration > 60) {
uni.showToast({
title: '视频时长不能超过1分钟',
icon: 'none'
})
continue //
}
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
})
}) })
} catch (error) {
console.error('视频处理失败:', error)
//
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
})
})
}
}
},
//
getVideoDuration(videoUrl) {
return new Promise((resolve, reject) => {
// #ifdef MP-WEIXIN
uni.getVideoInfo({
src: videoUrl,
success: (res) => {
resolve(res.duration)
},
fail: (err) => {
reject(err)
}
}) })
// #endif
// #ifdef APP-PLUS
plus.io.getVideoInfo({
filePath: videoUrl,
success: (res) => {
resolve(res.duration)
},
fail: (err) => {
reject(err)
}
})
// #endif
// #ifdef H5
// H5
resolve(0)
// #endif
}) })
}, },
@ -620,4 +674,4 @@
background: #ff4757; background: #ff4757;
color: white; color: white;
} }
</style>
</style>

+ 59
- 5
pages_subpack/house/other.vue View File

@ -44,7 +44,7 @@
</uv-form-item> </uv-form-item>
<uv-form-item label="资源视频" labelWidth="250" prop="videos" labelPosition="top" required> <uv-form-item label="资源视频" labelWidth="250" prop="videos" labelPosition="top" required>
<view class="upload-tip">请上传资源视频1分钟内</view>
<view class="upload-tip">请上传资源视频时长不超过1分钟最多上传3个视频</view>
<uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1" <uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1"
multiple :maxCount="3"></uv-upload> multiple :maxCount="3"></uv-upload>
</uv-form-item> </uv-form-item>
@ -235,12 +235,66 @@
// //
async afterVideoRead(e) { async afterVideoRead(e) {
let self = this let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
for (let file of e.file) {
try {
//
const duration = await this.getVideoDuration(file.url)
if (duration > 60) {
uni.showToast({
title: '视频时长不能超过1分钟',
icon: 'none'
})
continue //
}
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
})
}) })
} catch (error) {
console.error('视频处理失败:', error)
//
self.$Oss.ossUpload(file.url).then(url => {
self.form.videos.push({
url
})
})
}
}
},
//
getVideoDuration(videoUrl) {
return new Promise((resolve, reject) => {
// #ifdef MP-WEIXIN
uni.getVideoInfo({
src: videoUrl,
success: (res) => {
resolve(res.duration)
},
fail: (err) => {
reject(err)
}
}) })
// #endif
// #ifdef APP-PLUS
plus.io.getVideoInfo({
filePath: videoUrl,
success: (res) => {
resolve(res.duration)
},
fail: (err) => {
reject(err)
}
})
// #endif
// #ifdef H5
// H5
resolve(0)
// #endif
}) })
}, },


Loading…
Cancel
Save