elementui上传的文件名带#号如何转译并点击显示

Element UI 中的文件上传组件 `el-upload` 默认不会处理文件名中的特殊字符，包括 `#` 号。如果你需要将包含 `#` 的文件名转换展示，可以在文件接收后自行处理这个转换。以下是一个简单的示例：

<template>
  <el-upload
    :action="uploadUrl"
    :file-list="fileList"
    on-change="handleFileChange"
    on-success="handleSuccess"
  >
    <el-button slot="trigger">点击选择文件</el-button>
  </el-upload>

  <!-- 模拟文件列表 -->
  <ul v-if="fileList.length">
    <li v-for="(item, index) in fileList" :key="index">
      {{ handleFileName(item.name) }} ({{ item.url }})
      <button @click="showFile(item)">显示文件</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      uploadUrl: 'your-api-url', // 你的服务器上传接口地址
    };
  },
  methods: {
    handleFileChange(file) {
      this.fileList.push({
        name: file.name,
        url: '',
      });
    },
    
    handleSuccess(response, file) {
      // 文件上传成功后，在这里更新文件名处理后的url
      const newName = handleFileName(file.name);
      this.fileList.find(item => item.name === file.name).url = newName;
    },
    
    // 转换文件名函数
    handleFileName(name) {
      // 这里可以根据需求替换正则表达式或其他字符串处理逻辑
      return name.replace('#', '-hash-');
    },
    
    showFile(file) {
      // 展示文件的逻辑，可以跳转到新页面、下载或者其他操作
      window.open(file.url);
    },
  },
};
</script>

在这个例子中，我们在 `handleSuccess` 函数中获取到上传成功的文件，并在本地文件列表中替换 `name` 字段。同时，提供了一个点击按钮 `showFile` 来触发文件的显示。