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>
相关推荐
liliangcsdn21 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
香蕉可乐荷包蛋24 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
惜.己32 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte34 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
倔强青铜三41 分钟前
苦练Python第25天:玩转字典
人工智能·python·面试
倔强青铜三1 小时前
苦练Python第23天:元组秘籍与妙用
人工智能·python·面试
Norvyn_71 小时前
LeetCode|Day18|20. 有效的括号|Python刷题笔记
笔记·python·leetcode
chao_7892 小时前
更灵活方便的初始化、清除方法——fixture【pytest】
服务器·自动化测试·python·pytest
心情好的小球藻2 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
都叫我大帅哥2 小时前
LangChain加载HTML内容全攻略:从入门到精通
python·langchain