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>
相关推荐
程序员爱技术44 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
一点媛艺3 小时前
Kotlin函数由易到难
开发语言·python·kotlin
魔道不误砍柴功4 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
_.Switch4 小时前
高级Python自动化运维:容器安全与网络策略的深度解析
运维·网络·python·安全·自动化·devops
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
测开小菜鸟5 小时前
使用python向钉钉群聊发送消息
java·python·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js
萧鼎7 小时前
Python并发编程库:Asyncio的异步编程实战
开发语言·数据库·python·异步
学地理的小胖砸7 小时前
【一些关于Python的信息和帮助】
开发语言·python