appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化上传组件

master
绝弹 2023-10-31 22:35:35 +08:00
parent ce93e87e38
commit 7bea445253
3 changed files with 108 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/post/media/components/upload.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button type="primary" @click="visible = true"> 上传文件 </a-button>
<a-modal
v-model:visible="visible"
title="上传文件"
title-align="start"
:width="820"
:width="860"
:mask-closable="false"
:on-before-cancel="onBeforeCancel"
@close="onClose"
@ -18,6 +19,7 @@
:auto-upload="false"
:show-file-list="false"
@success="onUploadSuccess"
@error="onUploadError"
>
<template #upload-button>
<a-button type="outline"> 选择文件 </a-button>
@ -31,58 +33,58 @@
</div>
</div>
<ul v-if="fileList.length" class="h-[400px] divide-y overflow-hidden p-0 m-0">
<li v-for="item in fileList" :key="item.uid" class="flex items-center gap-2 py-3">
<div class="flex-1 overflow-hidden">
<div class="truncate text-slate-900">
{{ item.name }}
</div>
<div class="flex items-center justify-between gap-2 text-gray-400 mb-[-4px]">
<span class="text-xs text-gray-400">
{{ numeral(item.file?.size).format("0 b") }}
</span>
<span class="text-xs">
<span v-if="item.status === 'init'"> </span>
<span v-else-if="item.status === 'uploading'">
<span class="text-xs">
{{ Math.floor((item.percent || 0) * 100) }}%(
{{ numeral(itemMap.get(item.uid)?.speed || 0).format("0 b") }}/s )
<ul v-if="fileList.length" class="h-[424px] overflow-hidden p-0 m-0">
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto pr-[20px] divide-y">
<li v-for="item in fileList" :key="item.uid" class="flex items-center gap-2 py-3">
<div class="flex-1 overflow-hidden">
<div class="truncate text-slate-900">
{{ item.name }}
</div>
<div class="flex items-center justify-between gap-2 text-gray-400 mb-[-4px] mt-1">
<span class="text-xs text-gray-400">
{{ numeral(item.file?.size).format("0 b") }}
</span>
<span class="text-xs">
<span v-if="item.status === 'init'"> </span>
<span v-else-if="item.status === 'uploading'">
<span class="text-xs">
速度：{{ numeral(fileMap.get(item.uid)?.speed || 0).format("0 b") }}/s, 进度：{{
Math.floor((item.percent || 0) * 100)
}}
%
</span>
</span>
<span v-else-if="item.status === 'done'" class="text-green-600">
完成(耗时：{{ fileMap.get(item.uid)?.cost || 0 }}秒)
</span>
<span v-else="item.status === 'error'" class="text-red-500">
失败(原因：{{ fileMap.get(item.uid)?.error }})
</span>
</span>
<span v-else-if="item.status === 'done'" class="text-green-600"> 完成 </span>
<span v-else="item.status === 'error'" class="text-red-500"> 失败 </span>
</span>
</div>
<a-progress :percent="Math.floor((item.percent || 0) * 100) / 100" :show-text="false"></a-progress>
</div>
<a-progress :percent="Math.floor((item.percent || 0) * 100) / 100" :show-text="false"></a-progress>
</div>
<div v-show="item.status !== 'done'">
<a-link v-show="item.status === 'uploading'" @click="pauseItem(item)">停止</a-link>
<a-link v-show="item.status === 'error'" @click="retryItem(item)">重试</a-link>
<a-link v-show="item.status === 'init' || item.status === 'error'" @click="removeItem(item)">删除</a-link>
</div>
</li>
<div v-show="item.status !== 'done'">
<a-link v-show="item.status === 'uploading'" @click="pauseItem(item)">停止</a-link>
<a-link v-show="item.status === 'error'" @click="retryItem(item)">重试</a-link>
<a-link v-show="item.status === 'init' || item.status === 'error'" @click="removeItem(item)">删除</a-link>
</div>
</li>
</a-scrollbar>
</ul>
<div v-else class="h-[400px] flex items-center justify-center">
<div v-else class="h-[424px] flex items-center justify-center">
<a-empty description="选择文件后显示"></a-empty>
</div>
<template #footer>
<div class="flex justify-between gap-2 items-center">
<div class="text-gray-400 text-xs">已上传 {{ successCount }} 项</div>
<div class="text-gray-400">已上传 {{ stat.doneCount }}/{{ fileList.length }} 项</div>
<div class="space-x-2">
<a-button
type="text"
:disabled="!fileList.length || !fileList.some((i) => i.status === 'done')"
@click="clearUploaded"
>
清空已上传
<a-button type="text" :disabled="!fileList.length || Boolean(stat.uploadingCount)" @click="clearUploaded">
清空
</a-button>
<a-button
type="primary"
:disabled="!fileList.length || !fileList.some((i) => i.status === 'init')"
@click="startUpload"
>
<a-button type="primary" :disabled="!fileList.length || !stat.initCount" @click="startUpload">
开始上传
</a-button>
</div>
@ -93,6 +95,7 @@
<script setup lang="ts">
import { RequestParams, api } from "@/api";
import { delConfirm } from "@/utils";
import { FileItem, Message, RequestOption, UploadInstance } from "@arco-design/web-vue";
import axios from "axios";
import numeral from "numeral";
@ -104,9 +107,35 @@ const emit = defineEmits<{
const visible = ref(false);
const uploadRef = ref<UploadInstance | null>(null);
const successCount = ref(0);
const fileList = ref<FileItem[]>([]);
const itemMap = reactive<Map<string, { lastTime: number; lastLoaded: number; speed: number } | null>>(new Map());
const fileMap = reactive<
Map<
string,
{
lastTime: number;
lastLoaded: number;
speed: number;
cost: number;
error: string;
} | null
>
>(new Map());
const stat = computed(() => {
const result = {
initCount: 0,
doneCount: 0,
uploadingCount: 0,
errorCount: 0,
};
for (const item of fileList.value) {
if (item.status === "init") result.initCount++;
if (item.status === "uploading") result.uploadingCount++;
if (item.status === "done") result.doneCount++;
if (item.status === "error") result.errorCount++;
}
return result;
});
/**
* 开始上传
@ -121,6 +150,10 @@ const startUpload = () => {
*/
const pauseItem = (item: FileItem) => {
uploadRef.value?.abort(item);
const file = fileMap.get(item.uid);
if (file) {
file.error = "手动中止";
}
};
/**
@ -145,8 +178,11 @@ const retryItem = (item: FileItem) => {
/**
* 清空已上传
*/
const clearUploaded = () => {
fileList.value = fileList.value.filter((i) => i.status !== "done");
const clearUploaded = async () => {
if (stat.value.doneCount !== fileList.value.length) {
await delConfirm("当前有未上传完成的文件，是否继续清空?");
}
fileList.value = [];
};
/**
@ -154,10 +190,20 @@ const clearUploaded = () => {
* @param item 文件
*/
const onUploadSuccess = (item: FileItem) => {
successCount.value += 1;
emit("success", item);
};
/**
* 上传失败后处理
* @param item 文件
*/
const onUploadError = (item: FileItem) => {
const file = fileMap.get(item.uid);
if (file) {
file.error = item.response?.data?.message || "网络异常";
}
};
/**
* 关闭前检测
*/
@ -173,8 +219,9 @@ const onBeforeCancel = () => {
* 关闭后处理
*/
const onClose = () => {
fileMap.clear();
fileList.value = [];
emit("close", successCount.value);
emit("close", stat.value.doneCount);
};
/**
@ -184,14 +231,17 @@ const onClose = () => {
const upload = (option: RequestOption) => {
const { fileItem, onError, onProgress, onSuccess } = option;
const source = axios.CancelToken.source();
if (!itemMap.has(fileItem.uid)) {
itemMap.set(fileItem.uid, {
if (!fileMap.has(fileItem.uid)) {
fileMap.set(fileItem.uid, {
lastTime: Date.now(),
lastLoaded: 0,
cost: 0,
speed: 0,
error: "网络异常",
});
}
const item = itemMap.get(fileItem.uid)!;
const item = fileMap.get(fileItem.uid)!;
const startTime = Date.now();
const up = async () => {
const data = { file: fileItem.file as any };
const params: RequestParams = {
@ -213,7 +263,8 @@ const upload = (option: RequestOption) => {
};
try {
const res = await api.file.addFile(data, params);
itemMap.delete(fileItem.uid);
const currentTime = Date.now();
item.cost = Math.floor((currentTime - startTime) / 1000);
onSuccess(res);
} catch (e) {
onError(e);

17
src/pages/post/media/index.vue
View File

@ -5,16 +5,10 @@
<div>
<Table v-bind="table">
<template #action>
<a-button type="primary" @click="uploadRef?.open()">
<template #icon>
<i class="icon-park-outline-upload"></i>
</template>
上传
</a-button>
<ani-upload></ani-upload>
<a-button type="outline" status="danger" :disabled="!selected.length" @click="onDeleteMany">
批量删除
</a-button>
<ani-upload ref="uploadRef"></ani-upload>
</template>
</Table>
<a-image-preview v-model:visible="visible" :src="image"></a-image-preview>
@ -26,10 +20,10 @@
<script setup lang="tsx">
import { api } from "@/api";
import { Table, createColumn, updateColumn, useTable } from "@/components";
import { delConfirm } from "@/utils";
import numeral from "numeral";
import AniGroup from "./components/group.vue";
import AniUpload from "./components/upload.vue";
import { delConfirm } from "@/utils";
const visible = ref(false);
const image = ref("");
@ -47,8 +41,6 @@ const onDeleteMany = async () => {
await delConfirm();
};
const uploadRef = ref<InstanceType<typeof AniUpload>>();
const getIcon = (mimetype: string) => {
if (mimetype.startsWith("image")) {
return "icon-file-iimage";
@ -94,7 +86,10 @@ const table = useTable({
)}
</div>
<div class="flex flex-col overflow-hidden">
<span class="hover:text-brand-500 hover:decoration-underline underline-offset-2 cursor-pointer" onClick={() => preview(record)}>
<span
class="hover:text-brand-500 hover:decoration-underline underline-offset-2 cursor-pointer"
onClick={() => preview(record)}
>
{record.name}
</span>
<span class="text-gray-400 text-xs truncate">{numeral(record.size).format("0 b")}</span>

20
src/types/auto-component.d.ts vendored
View File

@ -7,28 +7,22 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AAlert: typeof import('@arco-design/web-vue')['Alert']
AAutoComplete: typeof import('@arco-design/web-vue')['AutoComplete']
AAvatar: typeof import('@arco-design/web-vue')['Avatar']
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
AButton: typeof import('@arco-design/web-vue')['Button']
ACard: typeof import('@arco-design/web-vue')['Card']
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
ADivider: typeof import('@arco-design/web-vue')['Divider']
ADoption: typeof import('@arco-design/web-vue')['Doption']
ADrawer: typeof import('@arco-design/web-vue')['Drawer']
ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
ADropdownButton: typeof import('@arco-design/web-vue')['DropdownButton']
AEmpty: typeof import('@arco-design/web-vue')['Empty']
AForm: typeof import('@arco-design/web-vue')['Form']
AFormItem: typeof import('@arco-design/web-vue')['FormItem']
AImage: typeof import('@arco-design/web-vue')['Image']
AImagePreview: typeof import('@arco-design/web-vue')['ImagePreview']
AInput: typeof import('@arco-design/web-vue')['Input']
AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
ALayout: typeof import('@arco-design/web-vue')['Layout']
@ -36,29 +30,15 @@ declare module '@vue/runtime-core' {
ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
ALink: typeof import('@arco-design/web-vue')['Link']
AList: typeof import('@arco-design/web-vue')['List']
AListItem: typeof import('@arco-design/web-vue')['ListItem']
AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
AMenu: typeof import('@arco-design/web-vue')['Menu']
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
AModal: typeof import('@arco-design/web-vue')['Modal']
APagination: typeof import('@arco-design/web-vue')['Pagination']
APopover: typeof import('@arco-design/web-vue')['Popover']
AProgress: typeof import('@arco-design/web-vue')['Progress']
ARadio: typeof import('@arco-design/web-vue')['Radio']
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
ASelect: typeof import('@arco-design/web-vue')['Select']
ASpace: typeof import('@arco-design/web-vue')['Space']
ASpin: typeof import('@arco-design/web-vue')['Spin']
ATable: typeof import('@arco-design/web-vue')['Table']
ATableColumn: typeof import('@arco-design/web-vue')['TableColumn']
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
ATabs: typeof import('@arco-design/web-vue')['Tabs']
ATag: typeof import('@arco-design/web-vue')['Tag']
ATextarea: typeof import('@arco-design/web-vue')['Textarea']
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
ATree: typeof import('@arco-design/web-vue')['Tree']
AUpload: typeof import('@arco-design/web-vue')['Upload']
BaseOption: typeof import('./../components/editor/components/BaseOption.vue')['default']
Block: typeof import('./../components/editor/panel-main/components/block.vue')['default']