如何将前端传入的Base64字符串正确保存为MP4视频文件？

核心问题 #

1. JavaScript端错误处理Base64字符串：
   • readAsDataURL返回的是带data:video/mp4;base64,前缀的Base64格式字符串，你额外调用btoa(video_upload)做了二次编码，会导致后端拿到双重编码的无效内容；且实际请求里传递的video_upload带前缀，但Python仅截取前15个字符，无法完全清除前缀。
2. Python端解码逻辑冗余：
   • 对Base64字符串调用encode()属于多余操作，base64.b64decode()可直接接收字符串参数，额外编码可能引入格式错误。

修复步骤 #

第一步：修正JavaScript代码 #

移除多余编码，直接提取纯净的Base64数据：

c = console.log
const inputFile = document.querySelector('#file');
var vid_name = document.getElementById('vid-name')
var video_upload = 'no-vid'

inputFile.addEventListener('change', function () {
    const video = this.files[0]
    const reader = new FileReader();
    reader.onload = () => {
        c(video.name)
        vid_name.innerHTML = video.name
        // 截取Base64核心数据，去掉前缀
        video_upload = reader.result.split(',')[1]
    }
    reader.readAsDataURL(video);
})

document.getElementById('lesson-form').addEventListener('submit', function (e) {
    e.preventDefault();

    $.post('/edit_course/{{ uid }}/', {
        'lesson_video': video_upload,
        'lesson': 'd1',
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    }, function (data, status) {
        // 处理回调逻辑
    });
})

第二步：修正Python代码 #

直接解码纯净Base64字符串并写入文件：

import base64

lesson_vid = request.POST.get('lesson_video')

# 跳过默认值，避免解码报错
if lesson_vid != 'no-vid':
    with open("data/video1.mp4", "wb") as fh:
        fh.write(base64.b64decode(lesson_vid))
    # with语句会自动关闭文件，无需手动调用close()

关键说明 #

• readAsDataURL返回格式为data:[<mediatype>];base64,<data>，必须通过split(',')[1]提取真正的Base64数据。
• 后端无需对Base64字符串做encode()转换，直接传入b64decode即可。
• 必须判断lesson_vid是否为默认值no-vid，防止对无效字符串解码引发异常。

内容的提问来源于stack exchange，提问作者Kmaangaty