Angular PWA在iOS设备拍照上传时文件名重复问题求助

iOS Safari在通过拍照方式批量上传图片时，所有拍摄的图片会被赋予相同的临时文件名，导致后端接收时出现文件名冲突。以下是前端层面的解决方案，通过为每个上传文件生成唯一文件名来解决问题：

修改后的TypeScript代码 #

public attachFile(event: any): void {
    const files: FileList = event.target.files;
    const processedFiles: File[] = [];

    for (let i = 0; i < files.length; i++) {
        const originalFile = files[i];
        // 生成唯一文件名：时间戳+随机字符串+原文件扩展名
        const timestamp = Date.now();
        const randomStr = Math.random().toString(36).substr(2, 9);
        const fileExt = originalFile.name.split('.').pop() || '';
        const uniqueFileName = `${timestamp}-${randomStr}.${fileExt}`;

        // 创建新的File对象，保留原文件的内容、类型和修改时间
        const newFile = new File([originalFile], uniqueFileName, {
            type: originalFile.type,
            lastModified: originalFile.lastModified
        });
        processedFiles.push(newFile);
    }

    // 后续使用processedFiles数组执行上传逻辑即可
    // 示例：this.uploadService.uploadFiles(processedFiles);
}

关键说明 #

• 采用时间戳+随机字符串的组合生成文件名，能确保全局唯一性，避免重复
• 通过File构造器重新生成文件对象，完全保留原文件的核心信息，仅替换文件名
• 如果后端需要保留原文件名的记录，可以在上传时额外传递originalFile.name作为元数据

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