-Go服务器开发

从您提供的代码来看，存在一些语法错误和结构问题。以下是对您的代码进行修正和补充后的示例，以实现点击导入按钮弹出上传文件的模态框，并处理文件上传逻辑：

<template>
  <a-button class="margin-right-10 button-light-blue" @click="openModal">导入</a-button>
  
  <a-modal v-model:open="open" title="上传文件" @ok="handleOk">
    <div style="padding: 10px 0px">
      <span>上传文件:</span>
      <a-upload
        :before-upload="beforeUpload"
        :on-change="handleChange"
        accept=".xlsx,.xls"
        show-upload-list="{ showRemoveIcon: true }"
      >
        <a-button>选择文件</a-button>
      </a-upload>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';

const open = ref(false);

const openModal = () => {
  open.value = true;
};

const beforeUpload = (file) => {
  // 在这里可以做一些验证，比如检查文件格式、大小等
  return true; // 返回true表示允许上传
};

const handleChange = ({ file }) => {
  if (file.status === 'done') {
    // 上传成功的回调
    console.log(`${file.name} 文件上传成功`);
  } else if (file.status === 'error') {
    // 上传失败的回调
    console.error(`${file.name} 文件上传失败`);
  }
};

const handleOk = () => {
  console.log('模态框确认');
  open.value = false;
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

问题解释

红色文件名：通常情况下，如果您使用的是 Ant Design Vue 的 a-upload，当文件上传失败时，文件名会显示为红色。确保在 handleChange 方法中正确处理不同状态下的反馈。
联调接口：要与后端接口联调，可以在 beforeUpload 函数内或 handleChange 函数内调用相应的 API，例如使用 axios 或 fetch 来发送 POST 请求，将文件数据发送到后端服务器。
代码修正：注意原始代码中的一些语法错误，例如缺少引号、括号不匹配等。这些错误需要修复才能保证代码正常运行。