前端代码版本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>