合并数据:application/octet-stream; base64视频块中的文件
我的页面上有一个上传按钮,用户可以点击上传视频。如果视频很大,则JavaScript的文件读取器无法处理。因此,我已经实现了一个将视频切入的函数,并将视频上传到块中,其中包括“数据:application/ocket-stream; base64'',在开始时标签。同时,该功能将每个块发送到Nodejs后端,在此我使用一些“ FS”方法将视频文件合并回并将其保存为我的光盘上的MP4文件。问题是该文件是“空”。它被我的PC识别为MP4文件,没有错误的文件格式错误。但是该视频没有内容,并且长度为0秒。如何正确合并块以使MP4文件工作?
前端:
let reader;
let file;
const slice_size = 1024;
const start_chunks_upload = (e) => {
event.preventDefault();
reader = new FileReader();
file = e.target.files[0];
upload_file_chunks(0);
}
const upload_file_chunks = (start) => {
const next_slice = start + slice_size + 1;
const blob = file.slice(start, next_slice);
reader.onloadend = (e) => {
if (e.target.readyState !== FileReader.DONE) {
return;
}
$.ajax({
type: 'POST',
url: 'http://localhost:5000/video',
data: {
video: e.target.result.replace('data:application/octet-stream;base64,', ''),
is_done: next_slice < file.size ? null : true,
},
success: function(data) {
const size_done = start + slice_size;
const percent_done = Math.floor((size_done / file.size) * 100);
console.log(percent_done + '%');
if (next_slice < file.size) {
upload_file_chunks(next_slice);
} else {
console.log('done');
}
}
});
};
reader.readAsDataURL(blob);
}
video_upload_button.addEventListener('change', (e) => start_chunks_upload(e));
后端:
let string = '';
app.post('/video', (req, res) => {
string += req.body.video;
if (req.body.is_done) {
let buff = new Buffer.from(string, 'base64');
fs.writeFileSync('/one.mp4', buff);
fs.writeFile("/two.mp4", string, 'base64', function(err) {
console.log(err);
});
fs.appendFile('/log.txt', string, function (err) {
if (err) {
console.log(err);
}
})
} else {
return res.json({ok: 1,});
}
})
I have an upload button on my page which user can click to upload a video. If video is large, Javascript's File Reader can't handle it. So I've implemented a function that slices uploaded video into chunks with 'data:application/octet-stream;base64,' label at the beginning. Meanwhile the function sends each chunk to the NodeJS backend, where I use some 'fs' approaches to merge the video file back and save it as an mp4 file on my disc. The problem is that the file is 'empty'. It's recognized by my PC as an mp4 file, there is no error of wrong file format. But the video has no content and it's 0 seconds long. How can I merge chunks properly to make the mp4 file work?
Frontend:
let reader;
let file;
const slice_size = 1024;
const start_chunks_upload = (e) => {
event.preventDefault();
reader = new FileReader();
file = e.target.files[0];
upload_file_chunks(0);
}
const upload_file_chunks = (start) => {
const next_slice = start + slice_size + 1;
const blob = file.slice(start, next_slice);
reader.onloadend = (e) => {
if (e.target.readyState !== FileReader.DONE) {
return;
}
$.ajax({
type: 'POST',
url: 'http://localhost:5000/video',
data: {
video: e.target.result.replace('data:application/octet-stream;base64,', ''),
is_done: next_slice < file.size ? null : true,
},
success: function(data) {
const size_done = start + slice_size;
const percent_done = Math.floor((size_done / file.size) * 100);
console.log(percent_done + '%');
if (next_slice < file.size) {
upload_file_chunks(next_slice);
} else {
console.log('done');
}
}
});
};
reader.readAsDataURL(blob);
}
video_upload_button.addEventListener('change', (e) => start_chunks_upload(e));
Backend:
let string = '';
app.post('/video', (req, res) => {
string += req.body.video;
if (req.body.is_done) {
let buff = new Buffer.from(string, 'base64');
fs.writeFileSync('/one.mp4', buff);
fs.writeFile("/two.mp4", string, 'base64', function(err) {
console.log(err);
});
fs.appendFile('/log.txt', string, function (err) {
if (err) {
console.log(err);
}
})
} else {
return res.json({ok: 1,});
}
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论