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>
相关推荐
刘政feng啊3 分钟前
[Vue2]从零实现一个 el-popover 气泡框组件
vue.js
Hilaku8 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)13 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
巨人张14 分钟前
信息素养Python编程题
开发语言·python
站大爷IP20 分钟前
Python爬虫动态IP代理报错全解析:从问题定位到实战优化
python
hie9889427 分钟前
CentOS环境搭建-快速升级G++版本
linux·python·centos
盛寒30 分钟前
向量空间 线性代数
python·线性代数·机器学习
Hilaku37 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
5171 小时前
Django中序列化与反序列化
后端·python·django
lxiaoj1111 小时前
Python文件操作笔记
笔记·python