前言:app安卓端选择的视频最大只支持180MB,如需突破该限制请使用原生插件https://ext.dcloud.net.cn/search?q=%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9
最终选择uniapp自带的扩展组件: uFilePicker
地址:
https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html#
注意:
在模拟器端上传160MB请求1.5min后会取消请求,
网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout,
默认超时时间为60000 ms 即 1min
在manifest.json文件和name同级的部分添加代码
“networkTimeout” : {
“request” : 2000000,
“uploadFile” : 2000000
}
核心代码:
结构:
<u-form-item label="宣教视频(不超过500M):" label-width="150" prop="videos">
<view class="chooseVideo">
// 显示视频
<view class="item" v-if="videoValue.url">
<view v-if="videoValue.url" class="videoBox">
<video
:id="videoValue.url"
class="video"
play-btn-position="center"
:src="videoValue.url"
:show-progress="false"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-play-gesture="true"
:show-casting-button="true"
:show-screen-lock-button="true"
:enable-progress-gesture="false"
:show-mute-btn="true"
:muted="false"
:debug="true"
></video>
</view>
<view v-else class="videoBox">
<image
class="video"
:src="`${baseUrl}static-wechat/hw/icon/no-video.png`"
/>
</view>
<view class="deleteIcon" @click="deleteVideo()">
<u-icon name="close" color="#ffffff" size="20"> </u-icon>
</view>
</view>
// 没有视频时显示添加按钮
<view class="addBtn item" v-if="!videoValue.url">
// 扩展组件
<uni-file-picker
:disabled="isUploadVideo"
v-model="videoValue"
fileMediatype="video"
return-type="object"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
>
<view class="box">
<u-icon name="plus" size="40"></u-icon>
<view class="txt">选择视频</view>
</view>
</uni-file-picker>
</view>
</view>
</u-form-item>
逻辑:
import uniFilePicker from '@/components/uniFilePicker'
export default {
data() {
// 视频
videoValue: {},
// 视频上传的地址
baseUrl: config.baseUrl,
},
components: {
uniFilePicker,
},
method: {
// 上传音频
uploadVoice(voicePath) {
let me = this;
let promise = new Promise((resolve, reject) => {
uni.showLoading({
icon: 'loading',
title: '正在上传',
mask: true,
});
uni.uploadFile({
url: e.baseUrl + 'cloudFile/common/uploadFile',
filePath: voicePath,
name: 'file',
formData: {
user: 'test',
},
success: (res) => {
console.log(res, 'success');
let r = JSON.parse(res.data);
if (r.result == 0) {
resolve(r.data[0]);
console.log(r.data, '上传文件返回');
this.isUploadVideo = false;
uni.hideLoading();
} else {
this.$refs.uToast.show({
title: err.errMsg,
type: 'error',
});
this.isUploadVideo = false;
uni.hideLoading();
reject({});
}
},
error: (err) => {
console.log(err, 'err');
this.$refs.uToast.show({
title: err.errMsg,
type: 'error',
});
this.isUploadVideo = false;
uni.hideLoading();
reject({});
},
complete: (r) => {
if (!r?.data) {
this.$refs.uToast.show({
title: r.errMsg,
type: 'error',
});
this.isUploadVideo = false;
uni.hideLoading();
reject({});
}
console.log(r, 'rrrrr');
},
});
});
return promise;
},
// 获取上传状态
async select(e) {
var self = this;
console.log('选择文件:', e);
const res = e.tempFiles[0];
self.isUploadVideo = true;
if (res.size > 1024 * 1024 * 500) {
self.$refs.uToast.show({
title: '视频最大上传500MB',
type: 'error',
});
self.videoValue = {};
self.videoList = [];
self.isUploadVideo = false;
return;
} else {
self.videoValue = {
name: res.name,
extname: res.extname,
url: res.url,
};
let data = await self.uploadVoice(res.url);
self.videoList.push({
id: data.id,
name: data.fileName,
type: 'video/mp4',
});
}
},
// 删除一条视频
deleteVideo(i) {
uni.showModal({
title: '提示',
content: '是否要删除此视频',
success: (res) => {
if (res.confirm) {
this.videoValue = {};
this.videoList = [];
this.isUploadVideo = false;
uni.hideLoading();
// this.videoList.splice(i, 1);
}
},
});
},
}
}
样式:
.chooseVideo {
margin-bottom: 100upx;
display: flex;
flex-wrap: wrap;
.item {
width: 200upx;
height: 200upx;
overflow: hidden;
margin: 10rpx;
background: #f4f5f6;
position: relative;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
.deleteIcon {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 10;
background-color: #fa3534;
border-radius: 100rpx;
width: 44rpx;
height: 44rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.addBtn {
flex-direction: column;
color: #606266;
font-size: 26rpx;
.box {
width: 200upx;
height: 200upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
u-icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.txt {
margin-top: 20rpx;
line-height: 40rpx;
}
.delete {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 10;
background-color: #fa3534;
border-radius: 100rpx;
width: 44rpx;
height: 44rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
}
}