uniapp发视频
使用 uniapp 实现视频发布功能
准备工作
确保项目已配置好相关权限和依赖，包括相机、相册访问权限及网络请求权限。在 manifest.json 中声明所需权限。
视频上传流程
选择视频文件
通过 uni.chooseVideo API 从相册或相机获取视频文件。示例代码：
uni.chooseVideo({
sourceType: ['album', 'camera'],
success: (res) => {
console.log('视频临时路径:', res.tempFilePath);
this.videoPath = res.tempFilePath;
}
});上传至服务器
使用 uni.uploadFile 将视频上传到服务端：
uni.uploadFile({
url: 'https://your-server.com/upload',
filePath: this.videoPath,
name: 'video',
formData: { userId: '123' },
success: (uploadRes) => {
console.log('上传成功:', uploadRes.data);
}
});显示上传进度
可通过监听 progressUpdate 实现进度条显示：
uni.uploadFile({
// ...其他参数
progress: (res) => {
console.log('进度:', res.progress + '%');
this.progress = res.progress;
}
});视频压缩处理（可选）
使用插件压缩
可集成第三方插件如 uni-compress 进行视频压缩：
const compressor = new uniCompress({
quality: 0.7
});
compressor.compress(this.videoPath).then(compressedPath => {
this.compressedPath = compressedPath;
});服务端接口注意事项
接收视频文件
服务端需支持 multipart/form-data 格式接收文件。Node.js 示例：
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('video'), (req, res) => {
console.log('收到文件:', req.file);
});前端界面优化建议
上传状态反馈
通过 uni.showLoading 和 uni.hideLoading 增强交互体验：
uni.showLoading({ title: '上传中...' });
uni.uploadFile({
// ...上传参数
complete: () => uni.hideLoading()
});错误处理 需捕获可能出现的异常情况：
uni.chooseVideo({
fail: (err) => {
uni.showToast({ title: '选择视频失败', icon: 'none' });
}
});扩展功能实现
视频预览功能
上传前可通过 video 组件预览：
<video v-if="videoPath" :src="videoPath" controls></video>多视频分片上传 大文件建议采用分片上传策略：
// 需自行实现文件分片逻辑
const chunkSize = 1024 * 1024; // 1MB
const chunks = Math.ceil(file.size / chunkSize);注意事项
- iOS 系统对视频格式有特定要求，建议统一转为 MP4 格式
- 安卓设备需注意各厂商的文件路径访问差异
- 真机调试时务必检查权限是否申请成功
