ElementUI 实现上传同名且后缀不同的两个文件

在ElementUI中，如果需要上传同名但后缀不同的两个文件，可以通过给<el-upload>组件的before-upload钩子函数返回一个新的文件名来实现。以下是一个简单的示例：

<template>
  <el-upload
    action="https://your-upload-api"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      // 为文件生成一个唯一的文件名
      const uniqueName = `${Date.now()}-${file.name}`;
      // 修改文件名
      file.name = uniqueName;
      return true; // 继续上传
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err, file, fileList);
    },
  },
};
</script>

在这个示例中，handleBeforeUpload方法会在每个文件上传之前被调用。我们可以在这个方法里面修改文件的name属性，为它生成一个唯一的名字。这样，即使用户尝试上传同名文件，由于服务器端接收到的文件名不同，也能够成功上传。