导入上传文件:-Go服务器开发

在你的代码基础上，我将帮助你实现上传文件的功能。具体来说，你需要处理文件的选择、上传逻辑和文件的实际传输到服务器。以下是修改后的代码：

修改后的代码

<template>
  <div class="form-tool">
    <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"
          ref="uploadRef" 
        >
          <a-button>导入文件</a-button>
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { importCasePool } from '../../utils'; // 确保此路径正确

const open = ref(false);
const fileList = ref([]); // 存储上传的文件列表
const uploadRef = ref(null); // 用于访问 a-upload 实例

const openModal = () => {
  open.value = true; // 打开模态框
};

const beforeUpload = (file) => {
  const isExcelFile = /\.(xlsx|xls)$/.test(file.name); // 检查是否为 Excel 文件
  if (!isExcelFile) {
    message.error('您只能上传 Excel 文件!');
  }
  
  return isExcelFile; // 返回 true 或 false 控制是否允许上传
};

const handleChange = (info) => {
  fileList.value = info.fileList; // 更新文件列表

  if (info.file.status === 'done') {
    message.success(`${info.file.name} 文件上传成功`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
};

const handleOk = async () => {
  const formData = new FormData();
  
  fileList.value.forEach((file) => {
    formData.append('files[]', file.originFileObj); // 将每个选中的文件添加到 FormData 中
  });
  
  try {
    const response = await importCasePool(formData); // 调用导入接口，传递 FormData
    console.log(response);
    
    message.success('文件导入成功');
    
    open.value = false; // 成功后关闭模态框
    fileList.value = []; // 清空文件列表，以便下次使用
    uploadRef.value.clear(); // 清空 a-upload 的内容，如果支持这个方法的话
  } catch (error) {
    console.error(error);
    message.error('文件导入失败');
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

功能说明：

fileList: 我们创建了一个响应式 ref 用于存储当前选择的文件列表。
beforeUpload: 在这个函数中，我们对上传的文件进行类型检查，确保用户只能选择 .xlsx 和 .xls 格式的 Excel 文件。
handleChange: 此函数会更新 fileList，并根据不同状态给出相应提示信息。
handleOk:
- 创建一个 FormData 对象，将所有选中的文件添加到其中。
- 使用 importCasePool(formData) 方法来将数据发送到服务器，并处理成功或失败的回调。