-Go服务器开发

以下是你提供的代码片段的改进版本，并添加了导入文件部分与接口联调的实现。这段代码展示了一个用于上传 Excel 文件的模态框，用户可以选择文件并在点击“导入”按钮后上传。

<template>
  <a-modal v-model:open="open" title="上传文件" @ok="handleOk">
    <div style="padding: 10px 0px">
      <span>上传文件:</span>
      <a-upload
        :before-upload="beforeUpload"
        @change="handleChange"
        accept=".xlsx,.xls"
        show-upload-list="{ showRemoveIcon: true }"
        :file-list="fileList"
        :on-remove="handleRemove"
      >
        <a-button>导入文件</a-button>
      </a-upload>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { request } from 'your-request-library'; // 替换为你的请求库

const open = ref(false);
const fileList = ref([]);

const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                  file.type === 'application/vnd.ms-excel';
  
  if (!isExcel) {
    // 可以在这里提示用户只允许上传 Excel 文件
    alert('只能上传 Excel 文件!');
  }
  
  return isExcel;
};

const handleChange = ({ fileList: newFileList }) => {
  fileList.value = newFileList;
};

const handleRemove = (file) => {
  const index = fileList.value.indexOf(file);
  if (index >= 0) {
    fileList.value.splice(index, 1);
  }
};

const updataData = async () => {
  const formData = new FormData();
  
  if (fileList.value.length > 0) {
    formData.append('file', fileList.value[0].originFileObj); // 获取第一个文件
    
    try {
      const response = await request({
        url: '/api/upload', // 替换为实际的接口地址
        method: 'POST',
        data: formData,
      });
      
      console.log('上传成功:', response);
      open.value = false; // 上传成功后关闭模态框
    } catch (error) {
      console.error('上传失败:', error);
    }
    
    // 清空已上传列表（可选）
    fileList.value = [];
  } else {
    alert('请先选择文件');
  }
};

const handleOk = () => {
  updataData();
};
</script>

<style scoped>
/* 添加样式（如需要） */
</style>