合并数据:application/octet-stream; base64视频块中的文件

发布于 2025-02-03 06:23:28 字数 2205 浏览 4 评论 0原文

我的页面上有一个上传按钮,用户可以点击上传视频。如果视频很大,则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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文