uniapp 选择视频压缩上传

### UniApp 中实现视频选择、压缩和上传功能的方法 在 UniApp 开发中，可以通过调用 `uni.chooseVideo` 方法来选择本地视频文件，并通过第三方库或自定义逻辑完成视频的压缩处理。最后利用 `uni.uploadFile` 或其他网络请求工具将视频上传到服务器。 以下是具体实现方式： #### 1. **视频选择** 可以使用 `uni.chooseVideo` API 来让用户从相册或拍摄中选择视频文件[^2]。 ```javascript chooseVideo() { uni.chooseVideo({ sourceType: ['album', 'camera'], // 可选来源：相册或相机 maxDuration: 60, // 最大录制时长（秒） camera: 'back', // 使用前置或者后置摄像头 success: (res) => { console.log('选择了视频:', res.tempFilePath); this.compressAndUpload(res.tempFilePath); // 调用压缩并上传函数 }, fail: (err) => { console.error('选择视频失败:', err); } }); } ``` --- #### 2. **视频压缩** 由于原生小程序不支持直接对视频进行压缩操作，因此需要借助云开发服务或其他插件来进行视频压缩。一种常见的做法是将视频上传至云端，在云端执行压缩后再下载回来；另一种方法是在前端引入轻量级的 H5 视频压缩库（如 `ffmpeg.js`），但这可能会增加客户端性能负担[^3]。 如果采用简单的方式，则可以在上传前仅调整分辨率参数作为初步优化措施： ```javascript compressVideo(filePath, callback) { const videoContext = uni.createVideoContext('myVideo'); // 创建视频上下文对象 let tempPath = filePath; // 这里可以根据需求设置更复杂的压缩策略 setTimeout(() => { // 模拟异步过程 callback(tempPath); // 返回压缩后的路径给回调函数 }, 1000); } // 调用示例 this.compressVideo(res.tempFilePath, compressedPath => { this.upload(compressedPath); // 继续上传已压缩好的视频 }); ``` > 注：实际项目中建议集成成熟的 SDK 完成高质量的视频压缩工作。 --- #### 3. **视频上传** 当完成了视频的选择与预处理之后，就可以将其发送到远程服务器存储位置去了。下面展示了一个基于 Promise 的通用上传接口设计[^4]: ```javascript upload(videoPath) { return new Promise((resolve, reject) => { uni.uploadFile({ url: 'https://example.com/upload', // 替换为目标地址 filePath: videoPath, name: 'file', formData: {}, // 额外表单数据可在此处补充 success: (response) => resolve(response), fail: error => reject(error) }); }).then(result => { console.log('成功上传:', result.data); }).catch(err => { console.error('上传错误:', err); }); } ``` --- ### 整合代码实例 综合以上三个部分形成完整的解决方案如下所示： ```html <template> <view class="container"> <!-- UI组件 --> <button @click="handleChoose">选择&上传</button> </view> </template> <script> export default { data() { return {}; }, methods: { handleChoose() { this.chooseVideo(); }, chooseVideo() { uni.chooseVideo({ sourceType: ['album'], success: async (res) => { await this.compressVideo(res.tempFilePath).then(path => { this.upload(path); }); } }); }, compressVideo(filePath) { return new Promise(resolve => { // 此处省略具体的压缩逻辑... resolve(filePath); // 默认返回原始路径 }); }, upload(videoPath) { uni.uploadFile({ url: 'http://yourserver/api/video-upload', filePath: videoPath, name: 'video' }).then(res => { console.info(`上传结果:${JSON.stringify(res)}`); }).catch(e => { console.warn('发生异常'); }); } } }; </script> ``` --- ### 注意事项 - 如果目标平台涉及 iOS 和 Android 同时适配，请务必测试不同设备上的兼容性表现。 - 对于超大型文件传输场景考虑分片断点续传机制提升用户体验效果更好一些[^5]。