Skip to content

Commit bd6b203

Browse files
anncwbanncwb
committedDec 7, 2020
fix(upload): repair file upload and delete invalidation
1 parent 404db2f commit bd6b203

File tree

14 files changed

+202
-70
lines changed

14 files changed

+202
-70
lines changed
 

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ dist
44
.npmrc
55
.cache
66

7+
test/upload-server/static
8+
79
.local
810
# local env files
911
.env.local

‎CHANGELOG.zh_CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
- 修复菜单图标大小不一致
3131
- 修复顶部菜单宽度计算问题
3232
- 修复表格 tabSetting 问题
33+
- 修复文件上传删除失效
3334

3435
## 2.0.0-rc.12 (2020-11-30)
3536

‎src/components/Table/src/components/TableAction.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Icon from '/@/components/Icon/index';
44
import { DownOutlined } from '@ant-design/icons-vue';
55
import { ActionItem } from '/@/components/Table';
66
import { Button } from '/@/components/Button';
7+
import { snowUuid } from '/@/utils/uuid';
78
const prefixCls = 'basic-table-action';
89
export default defineComponent({
910
name: 'TableAction',
@@ -23,7 +24,7 @@ export default defineComponent({
2324
},
2425
},
2526
setup(props) {
26-
function renderButton(action: ActionItem, index: number) {
27+
function renderButton(action: ActionItem) {
2728
const { disabled = false, label, icon, color = '', type = 'link', ...actionProps } = action;
2829
const button = (
2930
<Button
@@ -32,7 +33,7 @@ export default defineComponent({
3233
disabled={disabled}
3334
color={color}
3435
{...actionProps}
35-
key={`${index}-${label}`}
36+
key={`${snowUuid()}`}
3637
>
3738
{() => (
3839
<>
@@ -45,10 +46,10 @@ export default defineComponent({
4546
return button;
4647
}
4748

48-
function renderPopConfirm(action: ActionItem, index: number) {
49+
function renderPopConfirm(action: ActionItem) {
4950
const { popConfirm = null } = action;
5051
if (!popConfirm) {
51-
return renderButton(action, index);
52+
return renderButton(action);
5253
}
5354
const {
5455
title,
@@ -60,15 +61,15 @@ export default defineComponent({
6061
} = popConfirm;
6162
return (
6263
<Popconfirm
63-
key={`p-${index}-${title}`}
64+
key={`${snowUuid()}`}
6465
title={title}
6566
onConfirm={confirm}
6667
onCancel={cancel}
6768
okText={okText}
6869
cancelText={cancelText}
6970
icon={icon}
7071
>
71-
{() => renderButton(action, index)}
72+
{() => renderButton(action)}
7273
</Popconfirm>
7374
);
7475
}
@@ -92,8 +93,8 @@ export default defineComponent({
9293
return (
9394
<div class={prefixCls}>
9495
{actions &&
95-
actions.map((action, index) => {
96-
return renderPopConfirm(action, index);
96+
actions.map((action) => {
97+
return renderPopConfirm(action);
9798
})}
9899
{dropDownActions && dropDownActions.length && (
99100
<Dropdown overlayClassName="basic-tale-action-dropdown">
@@ -104,13 +105,13 @@ export default defineComponent({
104105
<Menu>
105106
{{
106107
default: () => {
107-
return dropDownActions.map((action, index) => {
108+
return dropDownActions.map((action) => {
108109
const { disabled = false } = action;
109110
action.ghost = true;
110111
return (
111-
<Menu.Item key={`${index}`} disabled={disabled}>
112+
<Menu.Item key={`${snowUuid()}`} disabled={disabled}>
112113
{() => {
113-
return renderPopConfirm(action, index);
114+
return renderPopConfirm(action);
114115
}}
115116
</Menu.Item>
116117
);

‎src/components/Upload/src/FileList.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,49 @@ export default defineComponent({
1010
return () => {
1111
const { columns, actionColumn, dataSource } = props;
1212

13+
const columnList = [...columns, actionColumn];
1314
return (
1415
<table class="file-table">
1516
<colgroup>
16-
{[...columns, actionColumn].map((item) => {
17-
const { width = 0 } = item;
17+
{columnList.map((item) => {
18+
const { width = 0, dataIndex } = item;
1819
return width ? (
19-
<col style={'width:' + width + 'px;min-width:' + width + 'px;'} />
20+
<col style={'width:' + width + 'px;min-width:' + width + 'px;'} key={dataIndex} />
2021
) : (
2122
<col />
2223
);
2324
})}
2425
</colgroup>
2526
<thead>
2627
<tr class="file-table-tr">
27-
{[...columns, actionColumn].map((item) => {
28-
const { title = '', align = 'center' } = item;
29-
return <th class={['file-table-th', align]}>{title}</th>;
28+
{columnList.map((item) => {
29+
const { title = '', align = 'center', dataIndex } = item;
30+
return (
31+
<th class={['file-table-th', align]} key={dataIndex}>
32+
{title}
33+
</th>
34+
);
3035
})}
3136
</tr>
3237
</thead>
3338
<tbody>
3439
{dataSource.map((record = {}) => {
3540
return (
3641
<tr class="file-table-tr">
37-
{[...columns, actionColumn].map((item) => {
42+
{columnList.map((item) => {
3843
const { dataIndex = '', customRender, align = 'center' } = item;
3944
if (customRender && isFunction(customRender)) {
4045
return (
41-
<td class={['file-table-td', align]}>
46+
<td class={['file-table-td', align]} key={dataIndex}>
4247
{customRender({ text: record[dataIndex], record })}
4348
</td>
4449
);
4550
} else {
46-
return <td class={['file-table-td', align]}>{record[dataIndex]}</td>;
51+
return (
52+
<td class={['file-table-td', align]} key={dataIndex}>
53+
{record[dataIndex]}
54+
</td>
55+
);
4756
}
4857
})}
4958
</tr>

‎src/components/Upload/src/ThumbUrl.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<span class="thumb">
3+
<img v-if="fileUrl" :src="fileUrl" />
4+
</span>
5+
</template>
6+
<script lang="ts">
7+
import { defineComponent } from 'vue';
8+
import { propTypes } from '/@/utils/propTypes';
9+
10+
export default defineComponent({
11+
props: {
12+
fileUrl: propTypes.string.def(''),
13+
fileName: propTypes.string.def(''),
14+
},
15+
});
16+
</script>
17+
<style lang="less" scoped>
18+
.thumb {
19+
img {
20+
position: static;
21+
display: block;
22+
width: 104px;
23+
height: 104px;
24+
object-fit: cover;
25+
}
26+
}
27+
</style>

‎src/components/Upload/src/ThumnUrl.vue

-26
This file was deleted.

‎src/components/Upload/src/UploadModal.vue

+5-14
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@
2323
{{ getUploadBtnText }}
2424
</a-button>
2525
</template>
26+
2627
<div class="upload-modal-toolbar">
27-
<Alert :message="getHelpText" type="info" banner class="upload-modal-toolbar__text"></Alert>
28+
<Alert :message="getHelpText" type="info" banner class="upload-modal-toolbar__text" />
29+
2830
<Upload
2931
:accept="getStringAccept"
3032
:multiple="multiple"
@@ -50,7 +52,7 @@
5052
import { basicProps } from './props';
5153
import { createTableColumns, createActionColumn } from './data';
5254
// utils
53-
import { checkFileType, checkImgType, getBase64WithFile } from './utils';
55+
import { checkFileType, checkImgType, getBase64WithFile } from './helper';
5456
import { buildUUID } from '/@/utils/uuid';
5557
import { createImgPreview } from '/@/components/Preview/index';
5658
import { uploadApi } from '/@/api/sys/upload';
@@ -63,9 +65,9 @@
6365
components: { BasicModal, Upload, Alert, FileList },
6466
props: basicProps,
6567
setup(props, { emit }) {
66-
// 是否正在上传
6768
const { t } = useI18n();
6869
70+
// 是否正在上传
6971
const isUploadingRef = ref(false);
7072
const fileListRef = ref<FileItem[]>([]);
7173
const state = reactive<{ fileList: FileItem[] }>({
@@ -116,7 +118,6 @@
116118
const { size, name } = file;
117119
const { maxSize } = props;
118120
const accept = unref(getAccept);
119-
120121
// 设置最大值，则判断
121122
if (maxSize && file.size / 1024 / 1024 >= maxSize) {
122123
createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
@@ -175,7 +176,6 @@
175176
}
176177
try {
177178
item.status = UploadResultStatus.UPLOADING;
178-
179179
const { data } = await uploadApi(
180180
{
181181
...(props.uploadParams || {}),
@@ -266,15 +266,6 @@
266266
}
267267
}
268268
269-
// const [registerTable] = useTable({
270-
// columns: createTableColumns(),
271-
// actionColumn: createActionColumn(handleRemove, handlePreview),
272-
// pagination: false,
273-
// inset: true,
274-
// scroll: {
275-
// y: 3000,
276-
// },
277-
// });
278269
return {
279270
columns: createTableColumns(),
280271
actionColumn: createActionColumn(handleRemove, handlePreview),

‎src/components/Upload/src/data.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type { BasicColumn, ActionItem } from '/@/components/Table';
22

33
import { FileItem, PreviewFileItem, UploadResultStatus } from './types';
4-
import { checkImgType, isImgTypeByName } from './utils';
4+
import { checkImgType, isImgTypeByName } from './helper';
55
import { Progress, Tag } from 'ant-design-vue';
66

77
import TableAction from '/@/components/Table/src/components/TableAction';
8-
8+
import ThumbUrl from './ThumbUrl.vue';
99
import { useI18n } from '/@/hooks/web/useI18n';
1010
const { t } = useI18n();
1111

@@ -17,8 +17,8 @@ export function createTableColumns(): BasicColumn[] {
1717
title: t('component.upload.legend'),
1818
width: 100,
1919
customRender: ({ record }) => {
20-
const { thumbUrl, type } = (record as FileItem) || {};
21-
return <span>{thumbUrl ? <img style={{ maxWidth: '100%' }} src={thumbUrl} /> : type}</span>;
20+
const { thumbUrl } = (record as FileItem) || {};
21+
return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
2222
},
2323
},
2424
{
@@ -108,10 +108,8 @@ export function createPreviewColumns(): BasicColumn[] {
108108
title: t('component.upload.legend'),
109109
width: 100,
110110
customRender: ({ record }) => {
111-
const { url, type } = (record as PreviewFileItem) || {};
112-
return (
113-
<span>{isImgTypeByName(url) ? <img src={url} style={{ width: '50px' }} /> : type}</span>
114-
);
111+
const { url } = (record as PreviewFileItem) || {};
112+
return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
115113
},
116114
},
117115
{

‎src/components/Upload/src/utils.ts ‎src/components/Upload/src/helper.ts

File renamed without changes.

‎src/locales/lang/zh_CN/component/upload.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default {
1818
maxSizeMultiple: '只能上传不超过{0}MB的文件!',
1919
maxNumber: '最多只能上传{0}个文件',
2020

21-
legend: '图例',
21+
legend: '略缩图',
2222
fileName: '文件名',
2323
fileSize: '文件大小',
2424
fileStatue: '状态',

‎src/utils/uuid.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function buildUUID(): string {
1919
}
2020

2121
let unique = 0;
22-
export function snowUuid(prefix: string): string {
22+
export function snowUuid(prefix = ''): string {
2323
const time = Date.now();
2424
const random = Math.floor(Math.random() * 1000000000);
2525
unique++;

‎test/upload-server/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Upload Server
2+
3+
Simple file upload service for testing file upload components.
4+
5+
## Usage
6+
7+
```js
8+
9+
cs ./test/upload-server
10+
11+
yarn install
12+
13+
node app.js
14+
15+
```

0 commit comments

Comments
 (0)