ZBLOG

导入 上传文件:

看起来你在使用 Vue.js 和 Ant Design Vue 组件库来实现文件上传功能。如果你点击“导入文件”之后显示红色的文件名称,可能是由于文件上传处理逻辑或反馈未能正确实现。

首先,请确保以下几点:

  1. 检查 importCasePool 方法:确保这个方法能正确处理上传的文件,并返回相应的 Promise。需要保证它内部有处理文件上传的逻辑。

  2. 修改 handleOk 函数:你的代码中,在调用 importCasePool() 时没有传递当前选中的文件。这意味着即使你的方法能够正常工作,也无法得到要导入的具体文件信息。应该将该信息传递给 importCasePool()

  3. 错误提示:如果上传失败,你可能希望提供一些用户反馈,以便他们知道发生了什么。例如,可以在界面上显示一个消息通知。

下面是改进后的示例代码:

  1. <template>
  2. <div class="form-tool">
  3. <a-button class="margin-right-10 button-light-blue" @click="openModal">导入</a-button>
  4. <a-modal v-model:open="open" title="上传文件" @ok="handleOk">
  5. <div style="padding: 10px 0px">
  6. <span>上传文件:</span>
  7. <a-upload
  8. :before-upload="beforeUpload"
  9. :on-change="handleChange"
  10. accept=".xlsx,.xls"
  11. :show-upload-list="{ showRemoveIcon: true }"
  12. ref="upload"
  13. >
  14. <a-button>导入文件</a-button>
  15. </a-upload>
  16. </div>
  17. </a-modal>
  18. </div>
  19. </template>
  20. <script setup>
  21. import { ref, onMounted } from 'vue';
  22. import { importCasePool } from '../../utils';
  23. import { message } from 'ant-design-vue'; // 导入消息组件
  24. const open = ref(false);
  25. const fileList = ref([]); // 用于保存选中的文件
  26. const openModal = () => {
  27. open.value = true;
  28. };
  29. const beforeUpload = (file) => {
  30. fileList.value.push(file); // 保存当前选中的文件
  31. return true;
  32. };
  33. const handleChange = (info) => {
  34. console.log(info.file);
  35. };
  36. const handleOk = async () => {
  37. if (fileList.value.length === 0) {
  38. message.error('请先选择要导入的文件!');
  39. return;
  40. }
  41. try {
  42. const response = await importCasePool(fileList.value);
  43. console.log(response);
  44. if (response.success) {
  45. message.success('导入成功!');
  46. } else {
  47. message.error('导入失败!' + response.message);
  48. }
  49. } catch (error) {
  50. console.error(error);
  51. message.error('发生错误,请重试。');
  52. } finally {
  53. open.value = false;
  54. fileList.value = []; // 清空已选中文件
  55. }
  56. };
  57. </script>

注意事项:

  1. 将选中数据传递给 importCasePool:确保这个函数能够接受并正确处理所传递的参数(例如,要上传的文件)。

  2. 添加反馈信息:使用 message 提供用户友好的通知。

  3. 清空已选中文件:在每次操作后清空选中文件,这样下一次打开模态框时不会保留之前选择的内容。

通过以上这些更改,你可以为用户提供更明确的信息和更好的体验。同时,也要检查你的后端是否可以正确接收和处理这些请求,以及返回的数据格式是否符合预期。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=21021

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?