使用Recorder.js上传音频至FastAPI时遇multipart boundary缺失错误求助

问题出在你手动设置了content-type: multipart/form-data却未指定边界值，而浏览器处理multipart/form-data请求时会自动生成边界并添加到请求头中。正确做法是将Blob包装成FormData对象，让浏览器自动处理请求头和边界。

修改你的JavaScript代码如下：

rec.exportWAV(function(audio) {
    console.log(audio);
    var formData = new FormData();
    // 将Blob添加到FormData，第三个参数为自定义文件名
    formData.append("file", audio, "recording.wav");
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://api.uneduashqiperine.com/secondtry", true);
    // 无需手动设置content-type，浏览器会自动添加带边界的正确请求头
    xhr.onload = function(e) {
        if (xhr.status === 200) {
            console.log("上传成功", xhr.responseText);
        } else {
            console.error("上传失败", xhr.statusText);
        }
    };
    xhr.send(formData);
});

补充说明： #

• FastAPI的/secondtry接口用bytes = File()接收完全可行，你也可以选择/thirdtry的UploadFile类型，两者都能处理FormData中的文件。
• 使用FormData.append时，第三个参数的文件名会被FastAPI的UploadFile.filename捕获，若调用/thirdtry接口可查看该值。

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