uni-app如何上传视频文件(分片上传上去)
uni-app如何上传视频文件(分片上传上去)
因为上传的视频文件较大。后端想采用分片的形式接收。所以前端需要对上传的视频进行分片上传。但是在安卓手机和iOS系统上。uni自身的方法行不通。各种报错。api不支持或者获取不到想要的file对象。有懂得朋友提提意见。
如果使用uniapp接口。只允许文件上传。视频的接口根本获取不到file对象。
124 回复
大文件切片、分块、分段、分片，可用于分块上传、断点续传(ios、android) ：https://ext.dcloud.net.cn/plugin?id=3319
作者大大求代码在此谢谢 邮箱：1005525953@qq.com， 是用webview 模拟input文件输出吗，还是webview可以直接使用fileRender的readAsArrayBuffer？
在uni-app中实现视频文件的分片上传，需要结合前端和后端共同完成。以下是一个简要的实现思路和代码案例，主要关注前端uni-app部分，假设后端已经提供了相应的分片接收接口。
前端实现步骤
-
选择视频文件：使用
<input type="file">或uni-app的文件选择器组件来选择视频文件。 -
读取文件信息：通过
FileReader获取视频文件的大小，以便计算分片大小。 -
分片上传：将视频文件按指定大小进行分片，并逐个上传到服务器。
-
合并分片：服务器接收完所有分片后，进行合并操作（这一步通常在服务器端完成，前端不需要处理）。
代码案例
// 假设在页面的data中定义了以下变量
data() {
return {
videoFile: null, // 存储选中的视频文件
chunkSize: 2 * 1024 * 1024, // 每片2MB
totalChunks: 0, // 总片数
uploadedChunks: 0, // 已上传片数
};
}
// 选择视频文件
chooseVideo() {
uni.chooseVideo({
success: (res) => {
this.videoFile = res.tempFilePath;
this.uploadVideo();
},
});
}
// 上传视频
uploadVideo() {
const file = uni.getFileSystemManager().getFile({
filePath: this.videoFile,
encoding: 'binary',
success: (res) => {
const fileSize = res.size;
this.totalChunks = Math.ceil(fileSize / this.chunkSize);
for (let chunkIndex = 0; chunkIndex < this.totalChunks; chunkIndex++) {
const start = chunkIndex * this.chunkSize;
const end = Math.min(start + this.chunkSize, fileSize);
const chunk = res.data.slice(start, end);
this.uploadChunk(chunk, chunkIndex);
}
},
});
}
// 上传分片
uploadChunk(chunk, chunkIndex) {
uni.uploadFile({
url: 'https://your-server.com/upload-chunk', // 替换为你的服务器接口
filePath: '', // 不需要填写，因为我们要直接上传二进制数据
name: 'file',
file: chunk, // 直接传入二进制数据
formData: {
chunkIndex: chunkIndex,
totalChunks: this.totalChunks,
fileName: this.videoFile.split('/').pop(), // 提取文件名
},
success: () => {
this.uploadedChunks++;
if (this.uploadedChunks === this.totalChunks) {
console.log('上传完成');
}
},
fail: (err) => {
console.error('上传失败', err);
},
});
}
注意事项
- 错误处理：需要添加更多的错误处理逻辑，如重试机制、上传进度显示等。
- 跨域问题：如果前后端分离部署，需要处理跨域请求问题。
- 安全性：确保上传接口的安全性，避免恶意文件上传。
上述代码是一个简化的实现，具体项目中可能需要根据实际情况进行调整和优化。
