如何使用Axios将Blob上传至服务器？代码报错求助

首先，你遇到的Cannot read properties of undefined (reading '0')错误，是因为blobData是Blob对象，它根本没有files属性——files是<input type="file">元素或者FileList对象的专属属性，所以直接写blobData.files[0]肯定报错，别这么用。

再看你第一次的代码，上传失败的核心问题有两个：

• 请求地址写错了：你定义了url2 = "yati.php"，但axios.post里用的是url（这个是Blob的本地ObjectURL），等于把请求发给了本地Blob地址，而不是你的服务器接口yati.php。
• 手动设置了Content-Type: multipart/form-data：axios在处理FormData时会自动生成带boundary的正确Content-Type，手动设置会丢失boundary，导致服务器无法解析上传的文件。

修正后的完整代码：

recorder.onstop = () => {
    // 转换为mp4格式的Blob
    let blobData = new Blob(data, { type: 'video/mp4' });
  
    // 给视频标签和下载链接赋值（不需要的话可以删掉）
    let url = URL.createObjectURL(blobData)
    output.src = url
    anc.href = url

    var formData = new FormData();
    // 第三个参数是文件名，服务器可以拿到这个名称，方便后续处理
    formData.append("yawas", blobData, "recorded-video.mp4");
    
    var serverUrl = "yati.php";
    axios.post(serverUrl, formData)
        .then(function(res) {
            alert("success")
        })
        .catch(function(error) {
            // 打印错误详情，方便排查具体问题
            console.error("上传失败:", error);
            alert("error");
        })
};

额外排查建议：

• 服务器端的yati.php要确保正确接收文件，比如用$_FILES['yawas']获取上传文件信息，再执行保存逻辑。
• 如果还是失败，打开浏览器控制台的Network面板，查看请求的状态码、响应内容，或者服务器端的错误日志，定位具体问题。

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