使用JavaScript向AWS S3分片上传文件时实现进度条显示

核心问题 #

你的代码存在两个致命逻辑错误：

• 用setInterval定时重复绑定httpUploadProgress事件，每次执行都会创建新的AWS S3上传实例，不仅会重复上传文件，还会导致进度回调被多次触发，进度条更新混乱。
• 事件绑定时机错误：进度事件应该在启动上传操作时一次性绑定，而非定时轮询去绑定。

修正后的代码 #

// 重构上传进度监听逻辑，移除定时器轮询
function startProjectUploads() {
    const uploadedProjectList = uploadProgressStatus.uploadedProjectList;

    uploadedProjectList.forEach(project => {
        if (project.status !== 'Uploading') return;

        const progressBar = document.getElementById(`${project.id}_innerProgress`);
        const progressBarText = document.getElementById(`${project.id}_innerProgressText`);

        // 确保使用当前项目的文件、文件名和格式（根据实际数据结构调整）
        const file = project.file;
        const key = `${project.jbname}.${project.frmat}`;

        // 启动S3上传并绑定进度事件
        const upload = Koolioai.Progress(file, key);
        
        upload.on('httpUploadProgress', function(progress) {
            const progressPercentage = Math.round((progress.loaded / progress.total) * 100);
            
            // 更新进度条UI
            progressBar.style.width = `${progressPercentage}%`;
            progressBarText.textContent = progressPercentage;
            project.progress = progressPercentage;

            if (progressPercentage === 100) {
                project.status = "Uploaded";
            }
        });

        // 处理上传完成/失败的状态
        upload.send(function(err, data) {
            if (err) {
                console.error(`项目 ${project.id} 上传失败:`, err);
                project.status = "Failed";
                return;
            }
            console.log(`项目 ${project.id} 上传成功:`, data);
            project.status = "Uploaded";
        });
    });
}

// Koolioai.Progress 保持原有逻辑，确保返回S3上传对象
Koolioai.Progress = function(b, key) {
    return new AWS.S3().upload({
        Bucket: "你的存储桶名称",
        Key: key,
        Body: b
    });
};

// 在需要启动上传时调用此函数（比如用户点击上传按钮后）
// startProjectUploads();

关键调整说明 #

1. 移除setInterval：直接遍历项目列表，对每个待上传项目启动一次上传操作，避免重复创建上传实例和绑定事件。
2. 关联项目属性：确保上传时使用当前项目对应的文件、文件名等参数，需根据你的实际数据结构调整project.file等字段。
3. 正确绑定事件：在创建S3上传实例后立即绑定httpUploadProgress事件，实时接收进度更新。
4. 补充结果回调：通过send方法的回调处理上传成功/失败的状态，让项目状态更新更准确。

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