前端代码版本1
在这个版本中,能够实现文件上传以后,通过文件列表的链接点击以后进行回显。
但是有个问题,那就是文件的状态一直是加载中。
<template><a-uploadaction="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 newresFileList = resFileList.slice(-2);// 2. read from response and show file linkresFileList = resFileList.map(file => {if (file.response) {// Component will show file.url as linkfile.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.dataconsole.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>