文件上传同名冲突检测的前后端协同方案 | 极客日志

JavaScriptWeChat大前端java

文件上传同名冲突检测的前后端协同方案

解决了档案管理系统中文件上传同名冲突被静默忽略的问题。原因为前端去重逻辑缺陷（未含扩展名）及后端校验缺失。解决方案包括前端提交前获取完整文件名并比对现有文件，后端基于实际文件名校验并返回错误提示。通过前后端双重校验，确保数据一致性并明确反馈用户，避免数据丢失。

CodeArtist发布于 2026/4/5更新于 2026/4/176 浏览

在档案管理系统中，用户在同一目录下上传同名文件时，系统没有任何提示，新文件被静默忽略。本文记录这个文件重复校验问题的前后端协同解决方案。

一、问题背景

1.1 问题现象

操作步骤	预期结果

时间	操作	结果
12-11	创建问题	-
12-11	代码修复	提交前端 + 后端代码
12-12	合并代码	验证通过
12-25	验收关闭	功能正常

项目文档 ├── 规章制度 │ ├── 运营管理 │ │ ├── 合同.pdf ← 已存在 │ │ └── 规定.docx │ └── 用户协议 │ └── 协议.pdf └── 会议记录 └── ...

// 提交时的去重逻辑
const submit = async () => {
    const allFiles = [...categoryFiles, ...processedFiles]
    // 问题：按 fileName 去重，但 fileName 可能不含扩展名
    const uniqueFiles = []
    const fileNameSet = new Set()
    for (const file of allFiles) {
        const name = file.fileName || ''
        // 可能是 "合同" 而非 "合同.pdf"
        if (name && !fileNameSet.has(name)) {
            fileNameSet.add(name)
            uniqueFiles.push(file)
        }
    }
    // 问题：重复文件被静默过滤，没有任何提示！
}

public ResponseDTO<String> update(CommunityArchiveUpdateDTO dto) {
    // 问题：只检查 dto.getFileName()，但这个字段通常为空
    // 实际的文件名在 files 数组的每个对象中
    if (StringUtils.isNotBlank(dto.getFileName())) {
        // 这个分支几乎不会进入
        checkDuplicate(dto.getFileName());
    }
    // 直接保存，没有校验 files 中的重复文件
    archiveMapper.update(dto);
    return ResponseDTO.ok();
}

用户选择同名文件上传 ↓ 
前端：fileName 不含扩展名，比对失败 ↓ 
前端：静默去重，不提示用户 ↓ 
后端：fileName 为空，跳过校验 ↓ 
数据库：只保留第一个文件 ↓ 
用户：以为上传成功，实际新文件丢失

const submit = async () => {
    if (!isFormValid.value) return
    const userFileName = fileName.value.trim()
    
    // ========== 步骤 1：获取完整文件名（含扩展名）==========
    const getFullFileName = (item) => {
        if (typeof item === 'string') {
            return userFileName
        }
        // 优先使用上传时构造的完整文件名
        const directName = item.fileNameWithExt || item.originalName
        if (directName && directName.includes('.')) {
            return directName
        }
        // 兜底：从原始文件名中提取扩展名后拼接
        const original = item.originalFileName || item.name || ''
        if (original.includes('.')) {
            const ext = original.substring(original.lastIndexOf('.'))
            return userFileName + ext
        }
        return item.fileName || userFileName
    }
    
    // 获取所有新上传文件的完整文件名
    const newFullFileNames = urls.value.map(getFullFileName)
    
    // ========== 步骤 2：查找目标分类下的现有文件 ==========
    let categoryFiles = []
    if (originalCategoryData.value && originalCategoryData.value.length > 0) {
        let targetNode = null
        // 遍历三级目录结构，找到目标分类节点
        for (const firstLevel of originalCategoryData.value) {
            if (firstLevel.name === firstSelected.value) {
                if (!secondSelected.value) {
                    targetNode = firstLevel
                    break
                }
                if (firstLevel.children) {
                    for (const secondLevel of firstLevel.children) {
                        if (secondLevel.name === secondSelected.value) {
                            if (!thirdSelected.value) {
                                targetNode = secondLevel
                                break
                            }
                            if (secondLevel.children) {
                                for (const thirdLevel of secondLevel.children) {
                                    if (thirdLevel.name === thirdSelected.value) {
                                        targetNode = thirdLevel
                                        break
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        // 获取该分类下的现有文件
        if (targetNode && targetNode.files && Array.isArray(targetNode.files)) {
            categoryFiles = targetNode.files
        }
    }
    
    // ========== 步骤 3：检查是否存在同名文件 ==========
    const normalizeName = (name) => (name || '').trim().toLowerCase()
    // 构建现有文件名集合（忽略大小写）
    const existingNameSet = new Set(
        categoryFiles
            .map((f) => normalizeName(f.fileName || f.name || f.originalName))
            .filter((n) => n)
    )
    // 检查新文件是否与现有文件重名
    const newNameSet = new Set()
    for (const fullName of newFullFileNames) {
        const normalized = normalizeName(fullName)
        if (!normalized) continue
        // 与现有文件重名，或与本次上传的其他文件重名
        if (existingNameSet.has(normalized) || newNameSet.has(normalized)) {
            uni.showToast({
                title: '已存在同个名称的文件，请重新上传',
                icon: 'none',
                duration: 3000,
            })
            return // 阻断提交
        }
        newNameSet.add(normalized)
    }
    
    // ========== 步骤 4：通过校验，继续提交 ==========
    // ... 后续提交逻辑
}

@Service
public class CommunityArchiveService {
    @Autowired
    private FileService fileService;
    @Autowired
    private CommunityArchiveMapper archiveMapper;

    /**
     * 更新档案（添加文件）
     */
    public ResponseDTO<String> update(CommunityArchiveUpdateDTO dto) {
        // 获取现有文件列表
        List<String> existingFileKeys = archiveMapper.getFileKeysByCategoryId(dto.getId());
        
        // 获取新上传的文件 keys
        List<String> newFileKeys = dto.getFiles().stream()
            .map(FileDTO::getFileKey)
            .filter(Objects::nonNull)
            .collect(Collectors.toList());

        // 计算真正新增的文件（差集）
        List<String> addedFileKeys = newFileKeys.stream()
            .filter(key -> !existingFileKeys.contains(key))
            .collect(Collectors.toList());

        if (!addedFileKeys.isEmpty()) {
            // 获取已有文件的真实文件名
            Set<String> existingFileNames = fileService.getFileNamesByKeys(existingFileKeys).stream()
                .map(String::toLowerCase)
                .collect(Collectors.toSet());
            
            // 获取新增文件的真实文件名
            List<String> newFileNames = fileService.getFileNamesByKeys(addedFileKeys);

            // 检查是否有重复文件名
            for (String newName : newFileNames) {
                if (existingFileNames.contains(newName.toLowerCase())) {
                    return ResponseDTO.userErrorParam("已存在同个名称的文件，请重新上传");
                }
            }
        }
        
        // 通过校验，执行更新
        archiveMapper.update(dto);
        return ResponseDTO.ok();
    }
}

// 上传成功后，保存完整的文件信息
uni.uploadFile({
    // ... 上传配置
    success: (uploadRes) => {
        const res = JSON.parse(uploadRes.data)
        if (res.code === 0 && res.data) {
            // 关键：保存完整文件名（含扩展名）
            const fileData = {
                ...res.data,
                fileName: userFileName,           // 用户输入的名称
                originalFileName: originalFileName, // 原始文件名
                fileNameWithExt: userFileName + fileExtension // 完整文件名（含扩展名）
            }
            // 保存到文件列表
            selectFileList.value = [{
                name: originalFileName,
                displayName: userFileName,
                url: fileData.fileUrl,
                resData: fileData
            }]
            urls.value = [fileData]
        }
    }
})

<template>
    <view>
        <!-- 分类选择 -->
        <view @click="showCategoryPicker">
            <text>分类</text>
            <view>
                <text>{{ selectedCategory || '请选择文件分类' }}</text>
                <uni-icons type="right" size="16" color="#CCC"></uni-icons>
            </view>
        </view>
        
        <!-- 文件名输入 -->
        <view>
            <text>名称</text>
            <input v-model="fileName" placeholder="请输入文件名称" :maxlength="15" />
        </view>
        
        <!-- 上传区域 -->
        <view v-if="!uploadedFile">
            <view :class="{ disabled: !canUpload }" @click="handleUpload">
                <uni-icons type="upload" size="40" :color="canUpload ? '#40E0D0' : '#CCC'" />
                <text>点击上传文件</text>
                <text>支持常用文件格式，最大 5MB</text>
            </view>
        </view>
        
        <!-- 已上传文件展示 -->
        <view v-else>
            <view>
                <uni-icons type="paperclip" size="24" color="#40E0D0" />
                <text>{{ uploadedFile.displayName }}</text>
                <text>上传成功</text>
            </view>
            <view>
                <text @click="removeFile">删除</text>
                <text @click="reUpload">重新上传</text>
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view>
            <button @click="cancel">取消</button>
            <button :disabled="!isFormValid" @click="submit">确定</button>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 表单数据
const fileName = ref('')
const selectedCategory = ref('')
const selectedCategoryId = ref(null)
const uploadedFile = ref(null)
const categoryTree = ref([])

// 分类选择状态
const firstSelected = ref('')
const secondSelected = ref('')
const thirdSelected = ref('')

// 表单验证
const canUpload = computed(() => {
    return selectedCategory.value && fileName.value.trim()
})

const isFormValid = computed(() => {
    return canUpload.value && uploadedFile.value
})

/**
 * 处理文件上传
 */
const handleUpload = () => {
    if (!canUpload.value) {
        uni.showToast({ title: '请先选择分类和输入文件名称', icon: 'none' })
        return
    }
    
    const userFileName = fileName.value.trim()
    wx.chooseMessageFile({
        count: 1,
        type: 'all',
        success: (res) => {
            const tempFile = res.tempFiles[0]
            const originalFileName = tempFile.name
            // 获取文件扩展名
            const fileExtension = originalFileName.substring(originalFileName.lastIndexOf('.'))
            const fullFileName = userFileName + fileExtension
            
            // 检查文件大小
            if (tempFile.size > 5 * 1024 * 1024) {
                uni.showToast({ title: '文件大小不能超过 5MB', icon: 'none' })
                return
            }
            
            uni.showLoading({ title: '上传中...', mask: true })
            
            // 上传文件
            uni.uploadFile({
                url: '/api/upload',
                filePath: tempFile.path,
                name: 'file',
                success: (uploadRes) => {
                    const data = JSON.parse(uploadRes.data)
                    if (data.code === 0) {
                        // 保存文件信息，关键是保存完整文件名
                        uploadedFile.value = {
                            ...data.data,
                            fileName: userFileName,
                            originalFileName: originalFileName,
                            fileNameWithExt: fullFileName, // 完整文件名（含扩展名）
                            displayName: originalFileName
                        }
                        uni.showToast({ title: '上传成功', icon: 'success' })
                    } else {
                        uni.showToast({ title: data.msg || '上传失败', icon: 'none' })
                    }
                },
                fail: () => {
                    uni.showToast({ title: '网络错误', icon: 'none' })
                },
                complete: () => {
                    uni.hideLoading()
                }
            })
        }
    })
}

/**
 * 获取完整文件名（含扩展名）
 */
const getFullFileName = (file) => {
    // 优先使用已保存的完整文件名
    if (file.fileNameWithExt) {
        return file.fileNameWithExt
    }
    // 从原始文件名提取扩展名
    const original = file.originalFileName || file.name || ''
    if (original.includes('.')) {
        const ext = original.substring(original.lastIndexOf('.'))
        return fileName.value.trim() + ext
    }
    return file.fileName || fileName.value.trim()
}

/**
 * 查找目标分类下的现有文件
 */
const findCategoryFiles = () => {
    if (!categoryTree.value || categoryTree.value.length === 0) {
        return []
    }
    let targetNode = null
    // 遍历三级目录结构
    for (const first of categoryTree.value) {
        if (first.name !== firstSelected.value) continue
        if (!secondSelected.value) {
            targetNode = first
            break
        }
        for (const second of first.children || []) {
            if (second.name !== secondSelected.value) continue
            if (!thirdSelected.value) {
                targetNode = second
                break
            }
            for (const third of second.children || []) {
                if (third.name === thirdSelected.value) {
                    targetNode = third
                    break
                }
            }
        }
    }
    return targetNode?.files || []
}

/**
 * 提交表单
 */
const submit = async () => {
    if (!isFormValid.value) return
    
    // ========== 重点：提交前检查同名文件 ==========
    const fullFileName = getFullFileName(uploadedFile.value)
    const categoryFiles = findCategoryFiles()
    
    // 文件名归一化（忽略大小写）
    const normalizeName = (name) => (name || '').trim().toLowerCase()
    
    // 构建现有文件名集合
    const existingNames = new Set(
        categoryFiles
            .map(f => normalizeName(f.fileName || f.name))
            .filter(Boolean)
    )
    
    // 检查是否存在同名文件
    if (existingNames.has(normalizeName(fullFileName))) {
        uni.showToast({
            title: '已存在同个名称的文件，请重新上传',
            icon: 'none',
            duration: 3000
        })
        return // 阻断提交
    }
    
    // 通过校验，提交数据
    try {
        const data = {
            id: selectedCategoryId.value,
            files: [{ ...uploadedFile.value, fileName: fullFileName }] // 使用完整文件名
        }
        await addArchiveFile(data)
        uni.showToast({ title: '新增成功', icon: 'success' })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    } catch (error) {
        uni.showToast({ title: '新增失败', icon: 'none' })
    }
}

/**
 * 移除文件
 */
const removeFile = () => {
    uploadedFile.value = null
}

/**
 * 重新上传
 */
const reUpload = () => {
    uploadedFile.value = null
    handleUpload()
}

const cancel = () => {
    uni.navigateBack()
}
</script>

<style scoped lang="scss">
.upload-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 16px;
}
.form-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    margin-bottom: 1px;
    .label {
        width: 60px;
        color: #666;
        font-size: 14px;
    }
    .value {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
    }
    .input {
        flex: 1;
        font-size: 14px;
    }
}
.upload-area {
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
}
.upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    border: 2px dashed #e5e5e5;
    border-radius: 8px;
    &.disabled {
        opacity: 0.5;
    }
    .upload-text {
        margin-top: 12px;
        font-size: 16px;
        color: #333;
    }
    .upload-desc {
        margin-top: 8px;
        font-size: 12px;
        color: #999;
    }
}
.uploaded-file {
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    .file-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .file-name {
        flex: 1;
        font-size: 14px;
        color: #333;
    }
    .file-status {
        font-size: 12px;
        color: #52c41a;
    }
    .file-actions {
        display: flex;
        gap: 24px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #eee;
    }
    .action-btn {
        font-size: 14px;
        &.delete {
            color: #ff4d4f;
        }
        &.reupload {
            color: #40E0D0;
        }
    }
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    .btn {
        flex: 1;
        height: 44px;
        border-radius: 8px;
        font-size: 16px;
        &.cancel {
            background: #f5f5f5;
            color: #666;
        }
        &.submit {
            background: #40E0D0;
            color: #fff;
            &:disabled {
                background: #ccc;
            }
        }
    }
}
</style>

@Service
@Slf4j
public class ArchiveService {
    @Autowired
    private ArchiveMapper archiveMapper;
    @Autowired
    private FileService fileService;

    /**
     * 添加档案文件
     * @param dto 档案更新 DTO
     * @return 操作结果
     */
    public ResponseDTO<String> addArchiveFile(ArchiveUpdateDTO dto) {
        // 获取该分类下现有的文件 keys
        List<String> existingFileKeys = archiveMapper.getFileKeysByCategoryId(dto.getId());
        
        // 提取新上传的文件 keys
        List<String> newFileKeys = dto.getFiles().stream()
            .map(FileDTO::getFileKey)
            .filter(Objects::nonNull)
            .collect(Collectors.toList());

        // 计算真正新增的文件（排除已存在的）
        List<String> addedFileKeys = newFileKeys.stream()
            .filter(key -> !existingFileKeys.contains(key))
            .collect(Collectors.toList());

        if (!addedFileKeys.isEmpty()) {
            // 获取现有文件的真实文件名（含扩展名）
            Set<String> existingFileNames = fileService.getFileNamesByKeys(existingFileKeys).stream()
                .map(String::toLowerCase) // 忽略大小写
                .collect(Collectors.toSet());
            
            // 获取新增文件的真实文件名
            List<String> newFileNames = fileService.getFileNamesByKeys(addedFileKeys);

            // 校验是否有重复文件名
            for (String newName : newFileNames) {
                String normalizedName = newName.toLowerCase();
                if (existingFileNames.contains(normalizedName)) {
                    log.warn("文件名重复：{}, 分类 ID: {}", newName, dto.getId());
                    return ResponseDTO.userErrorParam("已存在同个名称的文件，请重新上传");
                }
            }
        }
        
        // 通过校验，执行更新
        archiveMapper.addFiles(dto.getId(), dto.getFiles());
        log.info("档案文件添加成功，分类 ID: {}, 文件数量：{}", dto.getId(), dto.getFiles().size());
        return ResponseDTO.ok();
    }
}

// api/archive.js

/**
 * 获取档案分类树
 * @param {string} communityId - 组织 ID
 */
export function getArchiveTree(communityId) {
    return request({
        url: '/archive/tree',
        method: 'get',
        params: { communityId }
    })
}

/**
 * 添加档案文件
 * @param {Object} data - 档案数据
 * @param {number} data.id - 分类 ID
 * @param {Array} data.files - 文件列表
 */
export function addArchiveFile(data) {
    return request({
        url: '/archive/add',
        method: 'post',
        data
    })
}

要点	说明
使用完整文件名	必须包含扩展名，如 `合同.pdf` 而非 `合同`
忽略大小写	`File.PDF` 和 `file.pdf` 应视为相同
前端先校验	提升用户体验，避免无效请求
后端兜底	作为最后防线，确保数据一致性
明确提示	告知用户具体原因，而非静默失败

// 归一化文件名（用于比较）
const normalizeName = (name) => {
    return (name || '').trim().toLowerCase()
}

// 获取完整文件名（含扩展名）
const getFullFileName = (userInput, originalFile) => {
    const ext = originalFile.substring(originalFile.lastIndexOf('.'))
    return userInput + ext
}

// 校验文件名是否重复
const isDuplicate = (newName, existingNames) => {
    const normalized = normalizeName(newName)
    return existingNames.some(name => normalizeName(name) === normalized)
}

层级	作用	优势
前端校验	即时反馈	用户体验好，减少服务器压力
后端校验	数据安全	防止绕过前端，确保数据一致

问题	教训
静默去重	任何数据处理都应给用户明确反馈
文件名不完整	文件名必须包含扩展名才能准确比对
后端校验缺失	关键业务逻辑必须有后端兜底
大小写敏感	文件名比较应忽略大小写

1. 选择三级目录"规章制度"	-	-
2. 上传文件 `合同.pdf`	上传成功	上传成功
3. 再次选择同一目录	-	-
4. 上传另一个 `合同.pdf`	提示"已存在同个名称的文件"	无任何提示，新文件被忽略

文件上传同名冲突检测的前后端协同方案

一、问题背景

1.1 问题现象

1.2 问题影响

1.3 修复历程

二、问题分析

2.1 业务场景

2.2 问题根因

问题 1：前端去重逻辑缺陷

问题 2：后端校验缺失

2.3 问题传导链

三、解决方案

3.1 前端修复：提交前校验同名文件

3.2 后端修复：基于实际文件名校验

3.3 文件上传时保存完整文件名

四、完整 Demo 代码

4.1 前端：文件上传组件

4.2 后端：档案服务

4.3 API 接口定义

五、经验总结

5.1 文件重复校验的要点

5.2 文件名处理的最佳实践

5.3 为什么需要前后端双重校验？

5.4 本问题的核心教训

更多推荐文章

相关免费在线工具

文件上传同名冲突检测的前后端协同方案

一、问题背景

1.1 问题现象

1.2 问题影响

1.3 修复历程

二、问题分析

2.1 业务场景

2.2 问题根因

问题 1：前端去重逻辑缺陷

问题 2：后端校验缺失

2.3 问题传导链

三、解决方案

3.1 前端修复：提交前校验同名文件

3.2 后端修复：基于实际文件名校验

3.3 文件上传时保存完整文件名

四、完整 Demo 代码

4.1 前端：文件上传组件

4.2 后端：档案服务

4.3 API 接口定义

五、经验总结

5.1 文件重复校验的要点

5.2 文件名处理的最佳实践

5.3 为什么需要前后端双重校验？

5.4 本问题的核心教训

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具