-Go服务器开发

要实现点击“导入”按钮弹出文件上传的模态框，并在用户上传文件后联调接口，你可以参考以下代码示例。这个示例使用Vue.js和Ant Design Vue组件库：

<template>
  <div>
    <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 }"
          :file-list="fileList"
        >
          <a-button>导入文件</a-button>
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>

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

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

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

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

const handleChange = (info) => {
  if (info.file.status === 'done') {
    // 上传成功后的逻辑
    console.log('File uploaded successfully:', info.file.response);
  } else if (info.file.status === 'error') {
    // 上传失败后的逻辑
    console.error('File upload failed:', info.file.response);
  }
  
  // 更新 fileList
  fileList.value = info.fileList;
};

const handleOk = async () => {
  // 在这里进行文件的处理，例如调用接口
  const formData = new FormData();
  
  // 假设我们只允许单个文件上传，取第一个文件进行处理
  if (fileList.value.length > 0) {
    formData.append('file', fileList.value[0].originFileObj); 
   
    try {
      const response = await fetch('/your/api/endpoint', { 
        method: 'POST',
        body: formData,
      });
      
      if (!response.ok) throw new Error('Network response was not ok');
      
      const data = await response.json();
      console.log(data); // 成功处理响应数据
      
      open.value = false; // 上传完成后关闭模态框
    } catch (error) {
      console.error('Error uploading the file:', error);
    }
  } else {
    console.warn('No file to upload');
  }
};
</script>

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