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

前端代码版本1

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

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

<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

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

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

<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>