<a-row type="flex">
<a-col :span="4">上传文件:</a-col>
<a-col style="color:#F64545">
<a-upload
v-model:file-list="fileList"
name="file"
:multiple="true"
action="上传文件的接口地址"
:headers="headers"
@change="handleChange"
>
<a-button type="primary">
<upload-outlined></upload-outlined>
选择文件
</a-button>
</a-upload>
</a-col>
</a-row>
// 引入保存token的文件
import { useUserStore } from "/@/store/modules/user";
interface FileItem {
uid: string;
name?: string;
status?: string;
response?: string;
url?: string;
}
interface FileInfo {
file: FileItem;
fileList: FileItem[];
}
setup(){
const fileList = ref([]);
const handleChange = (info: FileInfo) => {
fileList.value = info.fileList.slice(-1) // 这里限制只保留一条上传数据 如不限制可直接屏蔽
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
};
// 我的token
const userStore = useUserStore();
const token = userStore.getToken;
const headers = "Bearer " + token
return {
fileList,
headers: {
authorization: headers,
},
handleChange
}
}