421 lines
11 KiB
Vue
421 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<!-- 上传短视频 -->
|
|||
|
|
<view class="upload-content">
|
|||
|
|
<view class="progress-box" v-if="showProgress">
|
|||
|
|
<text class="progress-text">{{progress}}%</text>
|
|||
|
|
<text class="progress-lable">上传中</text>
|
|||
|
|
<progress :percent="progress"></progress>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="video" class="video-preview">
|
|||
|
|
<video
|
|||
|
|
:src="'https://app.mrrweb.com.cn' + video"
|
|||
|
|
ref="videoPlayer"
|
|||
|
|
v-if="video"
|
|||
|
|
class="preview-video"
|
|||
|
|
:controls="false"
|
|||
|
|
object-fit="cover"
|
|||
|
|
:autoplay="true"
|
|||
|
|
:muted="true"
|
|||
|
|
:initial-time="1"
|
|||
|
|
:show-center-play-btn="false"
|
|||
|
|
:show-loading="false"
|
|||
|
|
:enable-progress-gesture="false"
|
|||
|
|
:show-fullscreen-btn="false"
|
|||
|
|
:show-play-btn="false"
|
|||
|
|
@play="onPlay"
|
|||
|
|
></video>
|
|||
|
|
<!-- 备用提示 -->
|
|||
|
|
<view v-if="showFallback" class="video-fallback">
|
|||
|
|
<text>视频加载失败，请尝试刷新或更换视频源</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="delete-btn" @click="deleteVideo">×</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="upload-btn" @click="chooseVideo">
|
|||
|
|
<text class="plus-icon">+</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request';
|
|||
|
|
import sparkMD5 from 'spark-md5'; // 引入MD5计算库
|
|||
|
|
export default {
|
|||
|
|
name:"upload-video",
|
|||
|
|
props: {
|
|||
|
|
video: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
videoNum: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
autoplay: false,
|
|||
|
|
showProgress: false,
|
|||
|
|
progress: 0,
|
|||
|
|
showFallback: false,
|
|||
|
|
finalVideoUrl: '',
|
|||
|
|
platformAutoplay: true,
|
|||
|
|
autoplayMuted: true,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// watch: {
|
|||
|
|
// video: {
|
|||
|
|
// handler(newValue) {
|
|||
|
|
// this.video = newValue
|
|||
|
|
// },
|
|||
|
|
// deep: true
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
methods: {
|
|||
|
|
// 获取文件 (兼容各平台)
|
|||
|
|
getFile() {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
// #ifdef H5
|
|||
|
|
const input = document.createElement('input')
|
|||
|
|
input.type = 'file'
|
|||
|
|
input.accept = this.accept
|
|||
|
|
input.onchange = (e) => {
|
|||
|
|
// resolve(e.target.files[0])
|
|||
|
|
resolve(e)
|
|||
|
|
}
|
|||
|
|
input.click()
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef H5
|
|||
|
|
uni.chooseVideo({
|
|||
|
|
count: 1,
|
|||
|
|
sourceType: ['album', 'camera'],
|
|||
|
|
compressed: false,
|
|||
|
|
maxDuration: 180,
|
|||
|
|
camera: 'back',
|
|||
|
|
success: (res) => {
|
|||
|
|
// resolve(res.tempFiles[0])
|
|||
|
|
resolve(res)
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
reject(err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 上传视频区域
|
|||
|
|
async chooseVideo() {
|
|||
|
|
// 选择文件（添加类型校验）
|
|||
|
|
// const res = await uni.chooseVideo({
|
|||
|
|
// sourceType: ['album', 'camera'],
|
|||
|
|
// compressed: false,
|
|||
|
|
// maxDuration: 180,
|
|||
|
|
// camera: 'back'
|
|||
|
|
// });
|
|||
|
|
const res = await this.getFile();
|
|||
|
|
console.log(res,';;;;;;;;;;;;;;;;;;;;;;;;;;;')
|
|||
|
|
this.showProgress = true;
|
|||
|
|
let size = res.size;
|
|||
|
|
if(size > 5*1024*1024) {
|
|||
|
|
// 统一获取文件列表
|
|||
|
|
const files = res.tempFile || res;
|
|||
|
|
const file = res.tempFile || res;
|
|||
|
|
console.log('file',file)
|
|||
|
|
// if (!files || files.length === 0) {
|
|||
|
|
// uni.showToast({ title: '文件选择取消', icon: 'none' });
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
if (!file) {
|
|||
|
|
uni.showToast({ title: '视频选择取消', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
progress: (res) => {
|
|||
|
|
console.log(`分片${index}进度: ${res.progress}%`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通过 tempFiles 获取文件（UniApp规范）
|
|||
|
|
// const file = files[0];
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 计算文件MD5（优化大文件计算）
|
|||
|
|
const md5 = await this.calculateFileMD5(file);
|
|||
|
|
|
|||
|
|
// 分片大小（2MB）
|
|||
|
|
const chunkSize = 1 * 1024 * 1024;
|
|||
|
|
const totalChunks = Math.ceil(file.size / chunkSize);
|
|||
|
|
|
|||
|
|
// 分片上传
|
|||
|
|
for (let index = 0; index < totalChunks; index++) {
|
|||
|
|
const start = index * chunkSize;
|
|||
|
|
const end = Math.min(file.size, start + chunkSize);
|
|||
|
|
// #ifdef H5
|
|||
|
|
// 浏览器环境使用标准的 slice 方法
|
|||
|
|
const chunk = file.slice(start, end);
|
|||
|
|
// 上传分片
|
|||
|
|
await this.uploadChunk(chunk, index, totalChunks, md5);
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
// 非浏览器环境使用 Uniapp API
|
|||
|
|
const fs = uni.getFileSystemManager();
|
|||
|
|
const arrayBuffer = fs.readFileSync({
|
|||
|
|
filePath: file,
|
|||
|
|
position: start,
|
|||
|
|
length: end - start
|
|||
|
|
});
|
|||
|
|
// 上传分片
|
|||
|
|
await this.uploadChunk(arrayBuffer, index, totalChunks, md5);
|
|||
|
|
// #endif
|
|||
|
|
// 上传分片
|
|||
|
|
// await this.uploadChunk(chunk, index, totalChunks, md5);
|
|||
|
|
this.progress = parseInt((index+1)/totalChunks*100)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 合并请求
|
|||
|
|
await this.mergeChunks(md5, file.name);
|
|||
|
|
}else {
|
|||
|
|
let item = {
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
type: 'video'
|
|||
|
|
}
|
|||
|
|
this.uploadVideo(item)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
uploadVideo(item) {
|
|||
|
|
request.uploadVideo('/user/uploadvideo',item.filePath,'video',{type: item.type}).then(res=>{
|
|||
|
|
this.$emit('addVideo',res.path)
|
|||
|
|
// this.initVideo();
|
|||
|
|
this.showProgress = false;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 计算文件MD5（分块计算）
|
|||
|
|
calculateFileMD5(file) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const chunkSize = 1 * 1024 * 1024;
|
|||
|
|
const chunks = Math.ceil(file.size / chunkSize);
|
|||
|
|
const spark = new sparkMD5.ArrayBuffer();
|
|||
|
|
let currentChunk = 0;
|
|||
|
|
|
|||
|
|
const loadNext = () => {
|
|||
|
|
const start = currentChunk * chunkSize;
|
|||
|
|
const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
|
|||
|
|
// #ifdef H5
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
const reader = uni.getfilesystem;
|
|||
|
|
// #endif
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
spark.append(e.target.result);
|
|||
|
|
currentChunk++;
|
|||
|
|
if (currentChunk < chunks) {
|
|||
|
|
loadNext();
|
|||
|
|
} else {
|
|||
|
|
resolve(spark.end());
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
reader.readAsArrayBuffer(file.slice(start, end));
|
|||
|
|
};
|
|||
|
|
loadNext();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async uploadChunk(chunk, index, totalChunks, md5) {
|
|||
|
|
let that = this;
|
|||
|
|
try {
|
|||
|
|
// 获取ArrayBuffer
|
|||
|
|
const arrayBuffer = await new Promise((resolve) => {
|
|||
|
|
// #ifdef H5
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
const reader = uni.getfilesystem;
|
|||
|
|
// #endif
|
|||
|
|
reader.onload = () => resolve(reader.result);
|
|||
|
|
reader.readAsArrayBuffer(chunk);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 平台差异化处理
|
|||
|
|
let tempFilePath = '';
|
|||
|
|
|
|||
|
|
// 微信小程序/App端写入临时文件
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
const fs = uni.getFileSystemManager();
|
|||
|
|
tempFilePath = `${getTempDir()}${md5}_${Date.now()}_${index}.tmp`;
|
|||
|
|
|
|||
|
|
await new Promise((resolve, reject) => {
|
|||
|
|
fs.writeFile({
|
|||
|
|
filePath: tempFilePath,
|
|||
|
|
data: arrayBuffer,
|
|||
|
|
encoding: 'binary',
|
|||
|
|
success: resolve,
|
|||
|
|
fail: (err) => reject(`文件写入失败: ${JSON.stringify(err)}`)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// H5端特殊处理
|
|||
|
|
// #ifdef H5
|
|||
|
|
const blob = new Blob([arrayBuffer], { type: chunk.type });
|
|||
|
|
const file = new File([blob], `${md5}_${index}.bin`, {
|
|||
|
|
type: chunk.type,
|
|||
|
|
lastModified: Date.now()
|
|||
|
|
});
|
|||
|
|
tempFilePath = file;
|
|||
|
|
// #endif
|
|||
|
|
const uploadTask = await request.uploadTask('/user/uploadvideoother',tempFilePath,'file',{chunkIndex: index,totalChunks: totalChunks,md5: md5});
|
|||
|
|
|
|||
|
|
// 上传后清理临时文件（非H5）
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
fs.unlink({ filePath: tempFilePath });
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
return uploadTask;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('分片上传失败:', error);
|
|||
|
|
throw new Error(`分片${index}上传失败: ${error.message}`);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 合并请求
|
|||
|
|
mergeChunks(md5, fileName) {
|
|||
|
|
let that = this;
|
|||
|
|
request.post('/user/uploadvideomerge',{md5: md5,filename: fileName}).then(res=>{
|
|||
|
|
that.$emit('addVideo',res.path)
|
|||
|
|
// that.initVideo();
|
|||
|
|
that.showProgress = false;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 上传视频结束区域
|
|||
|
|
// 删除视频
|
|||
|
|
deleteVideo() {
|
|||
|
|
this.$emit('deleteVideo')
|
|||
|
|
},
|
|||
|
|
initVideo() {
|
|||
|
|
// 平台自动播放处理
|
|||
|
|
this.platformAutoplay = this.autoplay;
|
|||
|
|
|
|||
|
|
// iOS自动播放必须静音
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
if (plus.os.name === 'iOS' && this.autoplay) {
|
|||
|
|
this.autoplayMuted = true;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 路径处理
|
|||
|
|
this.processVideoUrl();
|
|||
|
|
},
|
|||
|
|
processVideoUrl() {
|
|||
|
|
if (!this.video) return;
|
|||
|
|
|
|||
|
|
// 处理APP本地路径
|
|||
|
|
if (this.video.startsWith('file://') || this.video.startsWith('/storage')) {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.finalVideoUrl = plus.io.convertLocalFileSystemURL(this.video);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN || H5
|
|||
|
|
this.finalVideoUrl = this.video;
|
|||
|
|
// #endif
|
|||
|
|
} else {
|
|||
|
|
this.finalVideoUrl = this.video;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPlay() {
|
|||
|
|
console.log('视频开始播放');
|
|||
|
|
this.platformAutoplay = true;
|
|||
|
|
this.showFallback = false;
|
|||
|
|
},
|
|||
|
|
onError(e) {
|
|||
|
|
console.error('视频播放错误:', e);
|
|||
|
|
this.showFallback = true;
|
|||
|
|
|
|||
|
|
// 尝试备用方案
|
|||
|
|
this.tryFallbackSource();
|
|||
|
|
},
|
|||
|
|
tryFallbackSource() {
|
|||
|
|
// 可以在这里实现备用视频源逻辑
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.upload-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.progress-box {
|
|||
|
|
width: 204rpx;
|
|||
|
|
height: 204rpx;
|
|||
|
|
background-color: rgba(0 ,0 ,0 , 0.5);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.progress-text {
|
|||
|
|
font-size: 42rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.progress-lable {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.progress-box progress {
|
|||
|
|
/* width: 204rpx; */
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
.video-preview,
|
|||
|
|
.upload-btn {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-video {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
.upload-btn {
|
|||
|
|
border: 2rpx dashed #DDDDDD;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plus-icon {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|