zdppy_api+vue3+antd实现批量上传文件的功能

前端代码版本1

在这个版本中,能够实现文件上传以后,通过文件列表的链接点击以后进行回显。

但是有个问题,那就是文件的状态一直是加载中。

html 复制代码
<template>
  <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :multiple="true"
      :file-list="fileList"
      @change="handleChange"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      Upload
    </a-button>
  </a-upload>
</template>
<script setup>
import {ref} from 'vue';
import {UploadOutlined} from "@ant-design/icons-vue";

const fileList = ref([
  {
    uid: '-1',
    name: '1.jpg',
    status: 'done',
    url: 'http://127.0.0.1:8888/download/1.jpg',
  },
]);

const handleChange = info => {
  let resFileList = [...info.fileList];

  // 1. Limit the number of uploaded files
  //    Only to show two recent uploaded files, and old ones will be replaced by the new
  resFileList = resFileList.slice(-2);

  // 2. read from response and show file link
  resFileList = resFileList.map(file => {
    if (file.response) {
      // Component will show file.url as link
      file.url = file.response.url;
    }
    return file;
  });
  fileList.value = resFileList;
};
</script>

前端代码版本2

这个版本中,简化了前端的代码。

在文件上传成功以后,我们提取上传文件的唯一标识,追加到了要回显的文件列表中。

html 复制代码
<template>
  <a-upload
      :multiple="true"
      :file-list="fileList"
      :customRequest="customRequest"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      Upload
    </a-button>
  </a-upload>
</template>
<script setup>
import {ref} from 'vue';
import {UploadOutlined} from "@ant-design/icons-vue";
import axios from "axios";

const fileList = ref([
  {
    uid: '-1',
    name: '1.jpg',
    status: 'done',
    url: 'http://127.0.0.1:8888/download/1.jpg',
  },
]);

const customRequest = (option) => {
  const formData = new FormData();
  const fileUrl = "http://127.0.0.1:8888/upload";
  formData.append('file[]', option.file);
  axios.postForm(fileUrl, {
    file: option.file,
  }).then(res => {
    console.log(res)
    const data = res.data.data
    console.log("data xxxxxxxxxx", data)
    fileList.value.push({
      uid: data.uuid,
      name: data.file_name,
      status: 'done',
      url: 'http://127.0.0.1:8888/download/' + data.file_name,
    })
  })
}
</script>
相关推荐
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
烛阴4 小时前
简单入门Python装饰器
前端·python
好开心啊没烦恼4 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
面朝大海,春不暖,花不开4 小时前
使用 Python 实现 ETL 流程:从文本文件提取到数据处理的全面指南
python·etl·原型模式
2301_805054565 小时前
Python训练营打卡Day59(2025.7.3)
开发语言·python
万千思绪6 小时前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
鱼樱前端6 小时前
今天介绍下最新更新的Vite7
前端·vue.js
微风粼粼7 小时前
程序员在线接单
java·jvm·后端·python·eclipse·tomcat·dubbo
云天徽上7 小时前
【PaddleOCR】OCR表格识别数据集介绍,包含PubTabNet、好未来表格识别、WTW中文场景表格等数据,持续更新中......
python·ocr·文字识别·表格识别·paddleocr·pp-ocrv5
你怎么知道我是队长8 小时前
python-input内置函数
开发语言·python