服务端能否读取AJAX请求中的对象？大体积视频文件上传如何实现？

方案可行性说明 #

直接发送FileReader对象到服务端读取的方案不可行。FileReader是浏览器端的宿主对象，仅存在于当前用户的浏览器运行环境中，无法通过HTTP协议序列化传输，服务端也不可能直接读取到客户端的本地对象实例。
你之前遇到大文件上传400错误的核心原因是使用readAsDataURL将文件转为了base64格式，base64编码会让文件体积膨胀约33%，超出了服务端默认的POST请求/上传文件大小上限，才触发400错误。

大体积视频上传优化方案 #

1. 优先优化现有上传逻辑，弃用base64转码 #

FormData原生支持直接传递File二进制对象，不需要经过FileReader转base64，既避免了体积膨胀，也减少了浏览器内存占用，修改后的代码参考：

// 假设从文件选择input节点获取上传的视频文件，示例节点id为videoFileInput
const uploadFile = document.querySelector('#videoFileInput').files[0];
var fileData = new FormData();
var fileType = ".avi";
// 直接append原始File对象，不需要转base64
fileData.append("file", uploadFile);
fileData.append("action", "myaction");
fileData.append("filetype", fileType);
fileData.append("post_id", my_script_vars.postID);

jQuery.ajax({
    url: 'https://www.reelme.app/sign-up/wp-admin/admin-ajax.php',
    processData: false,
    contentType: false,
    cache: false,
    data: fileData,  
    type: 'POST',
    // 其余原有配置
});

2. 调整服务端上传限制 #

400错误大多由服务端配置限制导致，你需要对应修改部署环境的配置：

• Nginx环境：调整client_max_body_size参数为你预期的最大视频大小，比如设置为2G
• PHP环境：调整php.ini中的upload_max_filesize、post_max_size、max_execution_time参数，适配大文件上传的大小和耗时要求
• WordPress后台：也可通过functions.php添加代码调整后台上传大小限制

3. 超大文件采用分片上传 #

如果视频大小超过2G，建议采用分片上传方案，规避单次请求大小上限，同时支持断点续传：

• 前端通过File.slice()方法将视频切分为固定大小的分片（比如每片5-10MB）
• 每个分片携带分片序号、总分片数、文件唯一标识发送到服务端
• 服务端接收完全部分片后，按顺序合并为完整的视频文件

4. 添加上传进度反馈 #

可通过jQuery ajax的xhr配置项添加上传进度提示，提升用户体验：

jQuery.ajax({
    // 其余配置不变
    xhr: function() {
        const xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                const percentComplete = evt.loaded / evt.total * 100;
                // 这里可以更新进度条UI
                console.log(`上传进度：${percentComplete.toFixed(2)}%`);
            }
        }, false);
        return xhr;
    }
})

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