Vue3 + TypeScript 避免上传同名文件不触发上传文件窗口问题解决方案

一、问题描述

在 Vue3 + TypeScript 项目中，开发者可能会遇到上传同名文件时不触发上传文件窗口的问题。这种情况通常发生在前端处理文件上传逻辑时，没有正确处理文件名冲突的情况。

二、问题分析

当用户尝试上传一个与已存在的文件同名的文件时，浏览器默认不会再次触发文件选择窗口，因为它认为该文件已经存在。这就需要我们在前端逻辑中添加额外的检查和处理机制。

三、解决方案

1. 检查文件是否存在

在上传文件之前，我们可以在前端进行检查，看服务器上是否已经存在同名文件。这可以通过发送一个请求到服务器端实现，服务器端检查文件存储位置，如果文件存在，则返回一个特定的响应。

2. 覆盖文件

如果业务逻辑允许同名文件覆盖，我们可以在文件上传时添加一个参数，比如 overwrite=true，这样即使文件存在，也会被新上传的文件覆盖。

3. 重命名文件

另一种解决方案是自动重命名上传的文件，以避免文件名冲突。可以在文件上传前，在前端生成一个唯一的文件名，比如通过添加时间戳或随机数来实现。

4. 用户确认

如果不允许自动覆盖文件，可以在检测到同名文件时提示用户，让用户选择是否覆盖或重命名文件。这可以通过弹出一个确认对话框来实现。

四、代码示例

以下是一个简单的示例，展示如何在 Vue3 + TypeScript 中实现文件上传前的检查逻辑：

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const file = ref<File | null>(null);

    const checkFileExistence = async (filename: string): Promise<boolean> => {
      try {
        const response = await axios.get(`/api/check-file-existence`, {
          params: { filename }
        });
        return response.data.exists;
      } catch (error) {
        console.error('检查文件存在性时出错:', error);
        return false;
      }
    };

    const handleFileUpload = async (event: Event) => {
      const input = event.target as HTMLInputElement;
      if (input.files && input.files.length > 0) {
        file.value = input.files[0];
        const filename = file.value.name;
        const fileExists = await checkFileExistence(filename);
        if (fileExists) {
          // 处理文件已存在的情况，例如提示用户
          const userChoice = confirm(`文件 ${filename} 已存在，是否覆盖？`);
          if (userChoice) {
            await uploadFile(file.value);
          }
        } else {
          // 上传文件
          await uploadFile(file.value);
        }
      }
    };

    const uploadFile = async (file: File) => {
      const formData = new FormData();
      formData.append('file', file);
      await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
    };

    return {
      handleFileUpload
    };
  }
});
</script>