refactor: vc-upload
tangjinzhou
parent
b0c3677d50
commit
67f5226cdc
|
|
@ -965,6 +965,10 @@
|
|||
@typography-title-margin-top: 1.2em;
|
||||
@typography-title-margin-bottom: 0.5em;
|
||||
|
||||
// Upload
|
||||
// ---
|
||||
@upload-actions-color: @text-color-secondary;
|
||||
|
||||
// Image
|
||||
// ---
|
||||
@image-size-base: 48px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import Upload from './Upload';
|
||||
import { uploadProps } from './interface';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AUploadDragger',
|
||||
inheritAttrs: false,
|
||||
props: uploadProps(),
|
||||
setup(props, { slots, attrs }) {
|
||||
return () => {
|
||||
const { height, ...restProps } = props;
|
||||
const { style, ...restAttrs } = attrs;
|
||||
const draggerProps = {
|
||||
...restProps,
|
||||
...restAttrs,
|
||||
type: 'drag',
|
||||
style: { ...(style as any), height: typeof height === 'number' ? `${height}px` : height },
|
||||
} as any;
|
||||
return <Upload {...draggerProps} v-slots={slots}></Upload>;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
import classNames from '../_util/classNames';
|
||||
import uniqBy from 'lodash-es/uniqBy';
|
||||
import findIndex from 'lodash-es/findIndex';
|
||||
import VcUpload from '../vc-upload';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { getOptionProps, hasProp, getSlot } from '../_util/props-util';
|
||||
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale-provider/default';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import Dragger from './Dragger';
|
||||
import UploadList from './UploadList';
|
||||
import type { UploadFile } from './interface';
|
||||
import { uploadProps } from './interface';
|
||||
import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import { getDataAndAriaProps } from '../_util/util';
|
||||
import { useInjectFormItemContext } from '../form/FormItemContext';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AUpload',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
Dragger,
|
||||
props: initDefaultProps(uploadProps, {
|
||||
type: 'select',
|
||||
multiple: false,
|
||||
action: '',
|
||||
data: {},
|
||||
accept: '',
|
||||
beforeUpload: T,
|
||||
showUploadList: true,
|
||||
listType: 'text', // or pictrue
|
||||
disabled: false,
|
||||
supportServerRender: true,
|
||||
}),
|
||||
setup() {
|
||||
const formItemContext = useInjectFormItemContext();
|
||||
return {
|
||||
upload: null,
|
||||
progressTimer: null,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
formItemContext,
|
||||
};
|
||||
},
|
||||
// recentUploadStatus: boolean | PromiseLike<any>;
|
||||
data() {
|
||||
return {
|
||||
sFileList: this.fileList || this.defaultFileList || [],
|
||||
dragState: 'drop',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
fileList(val) {
|
||||
this.sFileList = val || [];
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearProgressTimer();
|
||||
},
|
||||
methods: {
|
||||
onStart(file) {
|
||||
const targetItem = fileToObject(file);
|
||||
targetItem.status = 'uploading';
|
||||
const nextFileList = this.sFileList.concat();
|
||||
const fileIndex = findIndex(nextFileList, ({ uid }) => uid === targetItem.uid);
|
||||
if (fileIndex === -1) {
|
||||
nextFileList.push(targetItem);
|
||||
} else {
|
||||
nextFileList[fileIndex] = targetItem;
|
||||
}
|
||||
this.handleChange({
|
||||
file: targetItem,
|
||||
fileList: nextFileList,
|
||||
});
|
||||
// fix ie progress
|
||||
if (!window.File || (typeof process === 'object' && process.env.TEST_IE)) {
|
||||
this.autoUpdateProgress(0, targetItem);
|
||||
}
|
||||
},
|
||||
|
||||
onSuccess(response, file, xhr) {
|
||||
this.clearProgressTimer();
|
||||
try {
|
||||
if (typeof response === 'string') {
|
||||
response = JSON.parse(response);
|
||||
}
|
||||
} catch (e) {
|
||||
/* do nothing */
|
||||
}
|
||||
const fileList = this.sFileList;
|
||||
const targetItem = getFileItem(file, fileList);
|
||||
// removed
|
||||
if (!targetItem) {
|
||||
return;
|
||||
}
|
||||
targetItem.status = 'done';
|
||||
targetItem.response = response;
|
||||
targetItem.xhr = xhr;
|
||||
this.handleChange({
|
||||
file: { ...targetItem },
|
||||
fileList,
|
||||
});
|
||||
},
|
||||
onProgress(e, file) {
|
||||
const fileList = this.sFileList;
|
||||
const targetItem = getFileItem(file, fileList);
|
||||
// removed
|
||||
if (!targetItem) {
|
||||
return;
|
||||
}
|
||||
targetItem.percent = e.percent;
|
||||
this.handleChange({
|
||||
event: e,
|
||||
file: { ...targetItem },
|
||||
fileList: this.sFileList,
|
||||
});
|
||||
},
|
||||
onError(error, response, file) {
|
||||
this.clearProgressTimer();
|
||||
const fileList = this.sFileList;
|
||||
const targetItem = getFileItem(file, fileList);
|
||||
// removed
|
||||
if (!targetItem) {
|
||||
return;
|
||||
}
|
||||
targetItem.error = error;
|
||||
targetItem.response = response;
|
||||
targetItem.status = 'error';
|
||||
this.handleChange({
|
||||
file: { ...targetItem },
|
||||
fileList,
|
||||
});
|
||||
},
|
||||
onReject(fileList) {
|
||||
this.$emit('reject', fileList);
|
||||
},
|
||||
handleRemove(file) {
|
||||
const { remove: onRemove } = this;
|
||||
const { sFileList: fileList } = this.$data;
|
||||
|
||||
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
|
||||
// Prevent removing file
|
||||
if (ret === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const removedFileList = removeFileItem(file, fileList);
|
||||
|
||||
if (removedFileList) {
|
||||
file.status = 'removed'; // eslint-disable-line
|
||||
|
||||
if (this.upload) {
|
||||
this.upload.abort(file);
|
||||
}
|
||||
|
||||
this.handleChange({
|
||||
file,
|
||||
fileList: removedFileList,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleManualRemove(file) {
|
||||
if (this.$refs.uploadRef) {
|
||||
(this.$refs.uploadRef as any).abort(file);
|
||||
}
|
||||
this.handleRemove(file);
|
||||
},
|
||||
handleChange(info) {
|
||||
if (!hasProp(this, 'fileList')) {
|
||||
this.setState({ sFileList: info.fileList });
|
||||
}
|
||||
this.$emit('update:fileList', info.fileList);
|
||||
this.$emit('change', info);
|
||||
this.formItemContext.onFieldChange();
|
||||
},
|
||||
onFileDrop(e) {
|
||||
this.setState({
|
||||
dragState: e.type,
|
||||
});
|
||||
},
|
||||
reBeforeUpload(file, fileList) {
|
||||
const { beforeUpload } = this.$props;
|
||||
const { sFileList: stateFileList } = this.$data;
|
||||
if (!beforeUpload) {
|
||||
return true;
|
||||
}
|
||||
const result = beforeUpload(file, fileList);
|
||||
if (result === false) {
|
||||
this.handleChange({
|
||||
file,
|
||||
fileList: uniqBy(
|
||||
stateFileList.concat(fileList.map(fileToObject)),
|
||||
(item: UploadFile) => item.uid,
|
||||
),
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (result && result.then) {
|
||||
return result;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
clearProgressTimer() {
|
||||
clearInterval(this.progressTimer);
|
||||
},
|
||||
autoUpdateProgress(_, file) {
|
||||
const getPercent = genPercentAdd();
|
||||
let curPercent = 0;
|
||||
this.clearProgressTimer();
|
||||
this.progressTimer = setInterval(() => {
|
||||
curPercent = getPercent(curPercent);
|
||||
this.onProgress(
|
||||
{
|
||||
percent: curPercent * 100,
|
||||
},
|
||||
file,
|
||||
);
|
||||
}, 200);
|
||||
},
|
||||
renderUploadList(locale) {
|
||||
const {
|
||||
showUploadList = {},
|
||||
listType,
|
||||
previewFile,
|
||||
disabled,
|
||||
locale: propLocale,
|
||||
} = getOptionProps(this);
|
||||
const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList;
|
||||
const { sFileList: fileList } = this.$data;
|
||||
const { onDownload, onPreview } = this.$props;
|
||||
const uploadListProps = {
|
||||
listType,
|
||||
items: fileList,
|
||||
previewFile,
|
||||
showRemoveIcon: !disabled && showRemoveIcon,
|
||||
showPreviewIcon,
|
||||
showDownloadIcon,
|
||||
locale: { ...locale, ...propLocale },
|
||||
onRemove: this.handleManualRemove,
|
||||
onDownload,
|
||||
onPreview,
|
||||
};
|
||||
return <UploadList {...uploadListProps} />;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
showUploadList,
|
||||
listType,
|
||||
type,
|
||||
disabled,
|
||||
} = getOptionProps(this);
|
||||
const { sFileList: fileList, dragState } = this.$data;
|
||||
const { class: className, style } = this.$attrs;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
||||
|
||||
const vcUploadProps = {
|
||||
...this.$props,
|
||||
id: this.$props.id ?? this.formItemContext.id.value,
|
||||
prefixCls,
|
||||
beforeUpload: this.reBeforeUpload,
|
||||
onStart: this.onStart,
|
||||
onError: this.onError,
|
||||
onProgress: this.onProgress,
|
||||
onSuccess: this.onSuccess,
|
||||
onReject: this.onReject,
|
||||
ref: 'uploadRef',
|
||||
};
|
||||
|
||||
const uploadList = showUploadList ? (
|
||||
<LocaleReceiver
|
||||
componentName="Upload"
|
||||
defaultLocale={defaultLocale.Upload}
|
||||
children={this.renderUploadList}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const children = getSlot(this);
|
||||
|
||||
if (type === 'drag') {
|
||||
const dragCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-drag`]: true,
|
||||
[`${prefixCls}-drag-uploading`]: fileList.some((file: any) => file.status === 'uploading'),
|
||||
[`${prefixCls}-drag-hover`]: dragState === 'dragover',
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
});
|
||||
return (
|
||||
<span class={className} {...getDataAndAriaProps(this.$attrs)}>
|
||||
<div
|
||||
class={dragCls}
|
||||
onDrop={this.onFileDrop}
|
||||
onDragover={this.onFileDrop}
|
||||
onDragleave={this.onFileDrop}
|
||||
style={style}
|
||||
>
|
||||
<VcUpload {...vcUploadProps} class={`${prefixCls}-btn`}>
|
||||
<div class={`${prefixCls}-drag-container`}>{children}</div>
|
||||
</VcUpload>
|
||||
</div>
|
||||
{uploadList}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const uploadButtonCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-select`]: true,
|
||||
[`${prefixCls}-select-${listType}`]: true,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
});
|
||||
|
||||
// Remove id to avoid open by label when trigger is hidden
|
||||
// https://github.com/ant-design/ant-design/issues/14298
|
||||
if (!children.length || disabled) {
|
||||
delete vcUploadProps.id;
|
||||
}
|
||||
|
||||
const uploadButton = (
|
||||
<div class={uploadButtonCls} style={children.length ? undefined : { display: 'none' }}>
|
||||
<VcUpload {...vcUploadProps}>{children}</VcUpload>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (listType === 'picture-card') {
|
||||
return (
|
||||
<span class={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
|
||||
{uploadList}
|
||||
{uploadButton}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span class={className}>
|
||||
{uploadButton}
|
||||
{uploadList}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
|
||||
import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
|
||||
import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined';
|
||||
import DownloadOutlined from '@ant-design/icons-vue/DownloadOutlined';
|
||||
import Tooltip from '../../tooltip';
|
||||
import Progress from '../../progress';
|
||||
|
||||
import type {
|
||||
ItemRender,
|
||||
UploadFile,
|
||||
UploadListProgressProps,
|
||||
UploadListType,
|
||||
UploadLocale,
|
||||
} from '../interface';
|
||||
import type { VueNode } from '../../_util/type';
|
||||
import useConfigInject from '../../_util/hooks/useConfigInject';
|
||||
import Transition, { getTransitionProps } from '../../_util/transition';
|
||||
export const listItemProps = () => {
|
||||
return {
|
||||
prefixCls: String,
|
||||
locale: { type: Object as PropType<UploadLocale>, default: undefined as UploadLocale },
|
||||
file: Object as PropType<UploadFile>,
|
||||
items: Array as PropType<UploadFile[]>,
|
||||
listType: String as PropType<UploadListType>,
|
||||
isImgUrl: Function as PropType<(file: UploadFile) => boolean>,
|
||||
|
||||
showRemoveIcon: Boolean,
|
||||
showDownloadIcon: Boolean,
|
||||
showPreviewIcon: Boolean,
|
||||
removeIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
downloadIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
previewIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
|
||||
iconRender: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
actionIconRender: Function as PropType<
|
||||
(opt: {
|
||||
customIcon: VueNode;
|
||||
callback: () => void;
|
||||
prefixCls: string;
|
||||
title?: string | undefined;
|
||||
}) => VueNode
|
||||
>,
|
||||
itemRender: Function as PropType<ItemRender>,
|
||||
onPreview: Function as PropType<(file: UploadFile, e: Event) => void>,
|
||||
onClose: Function as PropType<(file: UploadFile) => void>,
|
||||
onDownload: Function as PropType<(file: UploadFile) => void>,
|
||||
progress: Object as PropType<UploadListProgressProps>,
|
||||
};
|
||||
};
|
||||
|
||||
export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListItem',
|
||||
inheritAttrs: false,
|
||||
props: listItemProps(),
|
||||
setup(props, { slots, attrs }) {
|
||||
const showProgress = ref(false);
|
||||
const progressRafRef = ref();
|
||||
onMounted(() => {
|
||||
progressRafRef.value = setTimeout(() => {
|
||||
showProgress.value = true;
|
||||
}, 300);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(progressRafRef.value);
|
||||
});
|
||||
const { rootPrefixCls } = useConfigInject('upload', props);
|
||||
const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`));
|
||||
return () => {
|
||||
const {
|
||||
prefixCls,
|
||||
locale,
|
||||
listType,
|
||||
file,
|
||||
items,
|
||||
progress: progressProps,
|
||||
iconRender,
|
||||
actionIconRender,
|
||||
itemRender = slots.itemRender,
|
||||
isImgUrl,
|
||||
showPreviewIcon,
|
||||
showRemoveIcon,
|
||||
showDownloadIcon,
|
||||
previewIcon: customPreviewIcon = slots.previewIcon,
|
||||
removeIcon: customRemoveIcon = slots.removeIcon,
|
||||
downloadIcon: customDownloadIcon = slots.downloadIcon,
|
||||
onPreview,
|
||||
onDownload,
|
||||
onClose,
|
||||
} = props;
|
||||
const { class: className, style } = attrs;
|
||||
// This is used for legacy span make scrollHeight the wrong value.
|
||||
// We will force these to be `display: block` with non `picture-card`
|
||||
const spanClassName = `${prefixCls}-span`;
|
||||
|
||||
const iconNode = iconRender({ file });
|
||||
let icon = <div class={`${prefixCls}-text-icon`}>{iconNode}</div>;
|
||||
if (listType === 'picture' || listType === 'picture-card') {
|
||||
if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
|
||||
const uploadingClassName = {
|
||||
[`${prefixCls}-list-item-thumbnail`]: true,
|
||||
[`${prefixCls}-list-item-file`]: file.status !== 'uploading',
|
||||
};
|
||||
icon = <div class={uploadingClassName}>{iconNode}</div>;
|
||||
} else {
|
||||
const thumbnail = isImgUrl?.(file) ? (
|
||||
<img
|
||||
src={file.thumbUrl || file.url}
|
||||
alt={file.name}
|
||||
class={`${prefixCls}-list-item-image`}
|
||||
/>
|
||||
) : (
|
||||
iconNode
|
||||
);
|
||||
const aClassName = {
|
||||
[`${prefixCls}-list-item-thumbnail`]: true,
|
||||
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
|
||||
};
|
||||
icon = (
|
||||
<a
|
||||
class={aClassName}
|
||||
onClick={e => onPreview(file, e)}
|
||||
href={file.url || file.thumbUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{thumbnail}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const infoUploadingClass = {
|
||||
[`${prefixCls}-list-item`]: true,
|
||||
[`${prefixCls}-list-item-${file.status}`]: true,
|
||||
[`${prefixCls}-list-item-list-type-${listType}`]: true,
|
||||
};
|
||||
const linkProps =
|
||||
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
|
||||
|
||||
const removeIcon = showRemoveIcon
|
||||
? actionIconRender({
|
||||
customIcon: customRemoveIcon ? customRemoveIcon({ file }) : <DeleteOutlined />,
|
||||
callback: () => onClose(file),
|
||||
prefixCls,
|
||||
title: locale.removeFile,
|
||||
})
|
||||
: null;
|
||||
|
||||
const downloadIcon =
|
||||
showDownloadIcon && file.status === 'done'
|
||||
? actionIconRender({
|
||||
customIcon: customDownloadIcon ? customDownloadIcon({ file }) : <DownloadOutlined />,
|
||||
callback: () => onDownload(file),
|
||||
prefixCls,
|
||||
title: locale.downloadFile,
|
||||
})
|
||||
: null;
|
||||
const downloadOrDelete = listType !== 'picture-card' && (
|
||||
<span
|
||||
key="download-delete"
|
||||
class={[
|
||||
`${prefixCls}-list-item-card-actions`,
|
||||
{
|
||||
picture: listType === 'picture',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{downloadIcon}
|
||||
{removeIcon}
|
||||
</span>
|
||||
);
|
||||
const listItemNameClass = `${prefixCls}-list-item-name`;
|
||||
const preview = file.url
|
||||
? [
|
||||
<a
|
||||
key="view"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={listItemNameClass}
|
||||
title={file.name}
|
||||
{...linkProps}
|
||||
href={file.url}
|
||||
onClick={e => onPreview(file, e)}
|
||||
>
|
||||
{file.name}
|
||||
</a>,
|
||||
downloadOrDelete,
|
||||
]
|
||||
: [
|
||||
<span
|
||||
key="view"
|
||||
class={listItemNameClass}
|
||||
onClick={e => onPreview(file, e)}
|
||||
title={file.name}
|
||||
>
|
||||
{file.name}
|
||||
</span>,
|
||||
downloadOrDelete,
|
||||
];
|
||||
const previewStyle: CSSProperties = {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0.5,
|
||||
};
|
||||
const previewIcon = showPreviewIcon ? (
|
||||
<a
|
||||
href={file.url || file.thumbUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={file.url || file.thumbUrl ? undefined : previewStyle}
|
||||
onClick={e => onPreview(file, e)}
|
||||
title={locale.previewFile}
|
||||
>
|
||||
{customPreviewIcon ? customPreviewIcon({ file }) : <EyeOutlined />}
|
||||
</a>
|
||||
) : null;
|
||||
|
||||
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
|
||||
<span class={`${prefixCls}-list-item-actions`}>
|
||||
{previewIcon}
|
||||
{file.status === 'done' && downloadIcon}
|
||||
{removeIcon}
|
||||
</span>
|
||||
);
|
||||
|
||||
let message;
|
||||
if (file.response && typeof file.response === 'string') {
|
||||
message = file.response;
|
||||
} else {
|
||||
message = file.error?.statusText || file.error?.message || locale.uploadError;
|
||||
}
|
||||
const iconAndPreview = (
|
||||
<span class={spanClassName}>
|
||||
{icon}
|
||||
{preview}
|
||||
</span>
|
||||
);
|
||||
|
||||
const dom = (
|
||||
<div class={infoUploadingClass}>
|
||||
<div class={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
|
||||
{actions}
|
||||
{showProgress.value && (
|
||||
<Transition {...transitionProps.value}>
|
||||
<div v-show={file.status === 'uploading'} class={`${prefixCls}-list-item-progress`}>
|
||||
{'percent' in file ? (
|
||||
<Progress {...progressProps} type="line" percent={file.percent} />
|
||||
) : null}
|
||||
</div>
|
||||
</Transition>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
const listContainerNameClass = {
|
||||
[`${prefixCls}-list-${listType}-container`]: true,
|
||||
[`${className}`]: !!className,
|
||||
};
|
||||
const item =
|
||||
file.status === 'error' ? (
|
||||
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
|
||||
{dom}
|
||||
</Tooltip>
|
||||
) : (
|
||||
dom
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={listContainerNameClass} style={style} ref={ref}>
|
||||
{itemRender
|
||||
? itemRender({
|
||||
originNode: item,
|
||||
file,
|
||||
fileList: items,
|
||||
actions: {
|
||||
download: onDownload.bind(null, file),
|
||||
preview: onPreview.bind(null, file),
|
||||
remove: onClose.bind(null, file),
|
||||
},
|
||||
})
|
||||
: item}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
import * as React from 'react';
|
||||
import CSSMotion, { CSSMotionList, CSSMotionListProps } from 'rc-motion';
|
||||
import classNames from 'classnames';
|
||||
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
||||
import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
|
||||
import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
|
||||
import FileTwoTone from '@ant-design/icons/FileTwoTone';
|
||||
import { cloneElement, isValidElement } from '../../_util/reactNode';
|
||||
import { UploadListProps, UploadFile, UploadListType, InternalUploadFile } from '../interface';
|
||||
import { previewImage, isImageUrl } from '../utils';
|
||||
import collapseMotion from '../../_util/motion';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import Button, { ButtonProps } from '../../button';
|
||||
import useForceUpdate from '../../_util/hooks/useForceUpdate';
|
||||
import ListItem from './ListItem';
|
||||
|
||||
const listItemMotion: Partial<CSSMotionListProps> = {
|
||||
...collapseMotion,
|
||||
};
|
||||
|
||||
delete listItemMotion.onAppearEnd;
|
||||
delete listItemMotion.onEnterEnd;
|
||||
delete listItemMotion.onLeaveEnd;
|
||||
|
||||
const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
|
||||
{
|
||||
listType,
|
||||
previewFile,
|
||||
onPreview,
|
||||
onDownload,
|
||||
onRemove,
|
||||
locale,
|
||||
iconRender,
|
||||
isImageUrl: isImgUrl,
|
||||
prefixCls: customizePrefixCls,
|
||||
items = [],
|
||||
showPreviewIcon,
|
||||
showRemoveIcon,
|
||||
showDownloadIcon,
|
||||
removeIcon,
|
||||
previewIcon,
|
||||
downloadIcon,
|
||||
progress,
|
||||
appendAction,
|
||||
itemRender,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const forceUpdate = useForceUpdate();
|
||||
const [motionAppear, setMotionAppear] = React.useState(false);
|
||||
|
||||
// ============================= Effect =============================
|
||||
React.useEffect(() => {
|
||||
if (listType !== 'picture' && listType !== 'picture-card') {
|
||||
return;
|
||||
}
|
||||
(items || []).forEach((file: InternalUploadFile) => {
|
||||
if (
|
||||
typeof document === 'undefined' ||
|
||||
typeof window === 'undefined' ||
|
||||
!(window as any).FileReader ||
|
||||
!(window as any).File ||
|
||||
!(file.originFileObj instanceof File || (file.originFileObj as Blob) instanceof Blob) ||
|
||||
file.thumbUrl !== undefined
|
||||
) {
|
||||
return;
|
||||
}
|
||||
file.thumbUrl = '';
|
||||
if (previewFile) {
|
||||
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
||||
// Need append '' to avoid dead loop
|
||||
file.thumbUrl = previewDataUrl || '';
|
||||
forceUpdate();
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [listType, items, previewFile]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setMotionAppear(true);
|
||||
}, []);
|
||||
|
||||
// ============================= Events =============================
|
||||
const onInternalPreview = (file: UploadFile, e?: React.SyntheticEvent<HTMLElement>) => {
|
||||
if (!onPreview) {
|
||||
return;
|
||||
}
|
||||
e?.preventDefault();
|
||||
return onPreview(file);
|
||||
};
|
||||
|
||||
const onInternalDownload = (file: UploadFile) => {
|
||||
if (typeof onDownload === 'function') {
|
||||
onDownload(file);
|
||||
} else if (file.url) {
|
||||
window.open(file.url);
|
||||
}
|
||||
};
|
||||
|
||||
const onInternalClose = (file: UploadFile) => {
|
||||
onRemove?.(file);
|
||||
};
|
||||
|
||||
const internalIconRender = (file: UploadFile) => {
|
||||
if (iconRender) {
|
||||
return iconRender(file, listType);
|
||||
}
|
||||
const isLoading = file.status === 'uploading';
|
||||
const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
|
||||
let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
|
||||
if (listType === 'picture') {
|
||||
icon = isLoading ? <LoadingOutlined /> : fileIcon;
|
||||
} else if (listType === 'picture-card') {
|
||||
icon = isLoading ? locale.uploading : fileIcon;
|
||||
}
|
||||
return icon;
|
||||
};
|
||||
|
||||
const actionIconRender = (
|
||||
customIcon: React.ReactNode,
|
||||
callback: () => void,
|
||||
prefixCls: string,
|
||||
title?: string,
|
||||
) => {
|
||||
const btnProps: ButtonProps = {
|
||||
type: 'text',
|
||||
size: 'small',
|
||||
title,
|
||||
onClick: (e: React.MouseEvent<HTMLElement>) => {
|
||||
callback();
|
||||
if (isValidElement(customIcon) && customIcon.props.onClick) {
|
||||
customIcon.props.onClick(e);
|
||||
}
|
||||
},
|
||||
className: `${prefixCls}-list-item-card-actions-btn`,
|
||||
};
|
||||
if (isValidElement(customIcon)) {
|
||||
const btnIcon = cloneElement(customIcon, {
|
||||
...customIcon.props,
|
||||
onClick: () => {},
|
||||
});
|
||||
|
||||
return <Button {...btnProps} icon={btnIcon} />;
|
||||
}
|
||||
return (
|
||||
<Button {...btnProps}>
|
||||
<span>{customIcon}</span>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================== Ref ===============================
|
||||
// Test needs
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
handlePreview: onInternalPreview,
|
||||
handleDownload: onInternalDownload,
|
||||
}));
|
||||
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
// ============================= Render =============================
|
||||
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
||||
|
||||
const listClassNames = classNames({
|
||||
[`${prefixCls}-list`]: true,
|
||||
[`${prefixCls}-list-${listType}`]: true,
|
||||
[`${prefixCls}-list-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
// >>> Motion config
|
||||
const motionKeyList = [
|
||||
...items.map(file => ({
|
||||
key: file.uid,
|
||||
file,
|
||||
})),
|
||||
];
|
||||
|
||||
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
|
||||
// const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
|
||||
|
||||
let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
|
||||
motionDeadline: 2000,
|
||||
motionName: `${prefixCls}-${animationDirection}`,
|
||||
keys: motionKeyList,
|
||||
motionAppear,
|
||||
};
|
||||
|
||||
if (listType !== 'picture-card') {
|
||||
motionConfig = {
|
||||
...listItemMotion,
|
||||
...motionConfig,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={listClassNames}>
|
||||
<CSSMotionList {...motionConfig} component={false}>
|
||||
{({ key, file, className: motionClassName, style: motionStyle }) => (
|
||||
<ListItem
|
||||
key={key}
|
||||
locale={locale}
|
||||
prefixCls={prefixCls}
|
||||
className={motionClassName}
|
||||
style={motionStyle}
|
||||
file={file}
|
||||
items={items}
|
||||
progress={progress}
|
||||
listType={listType}
|
||||
isImgUrl={isImgUrl}
|
||||
showPreviewIcon={showPreviewIcon}
|
||||
showRemoveIcon={showRemoveIcon}
|
||||
showDownloadIcon={showDownloadIcon}
|
||||
removeIcon={removeIcon}
|
||||
previewIcon={previewIcon}
|
||||
downloadIcon={downloadIcon}
|
||||
iconRender={internalIconRender}
|
||||
actionIconRender={actionIconRender}
|
||||
itemRender={itemRender}
|
||||
onPreview={onInternalPreview}
|
||||
onDownload={onInternalDownload}
|
||||
onClose={onInternalClose}
|
||||
/>
|
||||
)}
|
||||
</CSSMotionList>
|
||||
|
||||
{/* Append action */}
|
||||
{appendAction && (
|
||||
<CSSMotion {...motionConfig}>
|
||||
{({ className: motionClassName, style: motionStyle }) =>
|
||||
cloneElement(appendAction, oriProps => ({
|
||||
className: classNames(oriProps.className, motionClassName),
|
||||
style: {
|
||||
...motionStyle,
|
||||
...oriProps.style,
|
||||
},
|
||||
}))
|
||||
}
|
||||
</CSSMotion>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
|
||||
|
||||
UploadList.displayName = 'UploadList';
|
||||
|
||||
UploadList.defaultProps = {
|
||||
listType: 'text' as UploadListType, // or picture
|
||||
progress: {
|
||||
strokeWidth: 2,
|
||||
showInfo: false,
|
||||
},
|
||||
showRemoveIcon: true,
|
||||
showDownloadIcon: false,
|
||||
showPreviewIcon: true,
|
||||
previewFile: previewImage,
|
||||
isImageUrl,
|
||||
};
|
||||
|
||||
export default UploadList;
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/upload/demo/avatar.vue correctly 1`] = `
|
||||
<span class="ant-upload-picture-card-wrapper avatar-uploader"><!----><div class="ant-upload ant-upload-select ant-upload-select-picture-card"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><div><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div></span></div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/basic.vue correctly 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" multiple=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text"></div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/defaultFileList.vue correctly 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text">
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg focusable="false" class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg focusable="false" class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="http://www.baidu.com/yyy.png">yyy.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class="">
|
||||
<!---->
|
||||
<div class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text">
|
||||
<div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg focusable="false" class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="zzz.png" href="http://www.baidu.com/zzz.png">zzz.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/directory.vue correctly 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" directory="directory" webkitdirectory="webkitdirectory"><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload Directory</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text"></div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/drag.vue correctly 1`] = `
|
||||
<span><div class="ant-upload ant-upload-drag"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" style="display: none;" accept="" multiple=""><div class="ant-upload-drag-container"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
|
||||
<p class="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p class="ant-upload-hint"> Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files </p>
|
||||
</div></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text"></div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/fileList.vue correctly 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" multiple=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text">
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg focusable="false" class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
</div></span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/picture-card.vue correctly 1`] = `
|
||||
<div class="clearfix"><span class="ant-upload-picture-card-wrapper"><div class="ant-upload-list ant-upload-list-picture-card"><div class="ant-upload-list-picture-card-container"><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="image.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">image.png</a><!----></span></div><span class="ant-upload-list-item-actions"><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span></a>
|
||||
<!----><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class="ant-upload-list-picture-card-container"><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="image.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">image.png</a><!----></span></div><span class="ant-upload-list-item-actions"><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span></a>
|
||||
<!----><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class="ant-upload-list-picture-card-container"><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="image.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">image.png</a><!----></span></div><span class="ant-upload-list-item-actions"><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span></a>
|
||||
<!----><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class="ant-upload-list-picture-card-container"><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="image.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">image.png</a><!----></span></div><span class="ant-upload-list-item-actions"><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span></a>
|
||||
<!----><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class="ant-upload-list-picture-card-container">
|
||||
<!---->
|
||||
<div class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-picture-card">
|
||||
<div class="ant-upload-list-item-info"><span><span role="img" aria-label="picture" class="anticon anticon-picture ant-upload-list-item-thumbnail"><svg focusable="false" class="" data-icon="picture" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z" fill="#1890ff"></path><path d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z" fill="#e6f7ff"></path><path d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z" fill="#e6f7ff"></path><path d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z" fill="#e6f7ff"></path><path d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z" fill="#1890ff"></path></svg></span><span class="ant-upload-list-item-name" title="image.png">image.png</span>
|
||||
<!----></span>
|
||||
</div><span class="ant-upload-list-item-actions"><a target="_blank" rel="noopener noreferrer" style="pointer-events: none; opacity: 0.5;" title="Preview file"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span></a>
|
||||
<!----><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-upload ant-upload-select ant-upload-select-picture-card"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><div><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div></span></div></span>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/picture-style.vue correctly 1`] = `
|
||||
<div><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-picture">
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">yyy.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
</div></span><br><br><span class="upload-list-inline"><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-picture">
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">yyy.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
</div></span></div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/preview-file.vue correctly 1`] = `
|
||||
<div><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-picture"></div></span></div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/transform-file.vue correctly 1`] = `
|
||||
<div><span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
|
||||
<div class="ant-upload-list ant-upload-list-text"></div></span></div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Upload List handle error 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span title="foo.png" class="ant-upload-list-item-name">foo.png</span><span class="ant-upload-list-item-card-actions "><a title="Remove file"><span role="img" aria-label="delete" tabindex="-1" title="Remove file" class="anticon anticon-delete"><svg viewBox="64 64 896 896" focusable="false" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<div class="ant-upload-list-item-progress">
|
||||
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
|
||||
<div>
|
||||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 0%; height: 2px; border-radius: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></span></div></span></span>
|
||||
`;
|
||||
|
||||
exports[`Upload List handle error 2`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span title="foo.png" class="ant-upload-list-item-name">foo.png</span><span class="ant-upload-list-item-card-actions "><a title="Remove file"><span role="img" aria-label="delete" tabindex="-1" title="Remove file" class="anticon anticon-delete"><svg viewBox="64 64 896 896" focusable="false" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<div class="ant-upload-list-item-progress">
|
||||
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
|
||||
<div>
|
||||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 0%; height: 2px; border-radius: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></span></div></span></span>
|
||||
`;
|
||||
|
||||
exports[`Upload List should be uploading when upload a file 1`] = `<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"></span></span>`;
|
||||
|
||||
exports[`Upload List should non-image format file preview 1`] = `
|
||||
<span><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/aaa.zip" target="_blank" rel="noopener noreferrer"><span role="img" aria-label="file" class="anticon anticon-file ant-upload-list-item-icon"><svg focusable="false" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg></span></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="not-image" href="https://cdn.xxx.com/aaa.zip">not-image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/aaa" target="_blank" rel="noopener noreferrer"><img src="https://cdn.xxx.com/aaa" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/aaa">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/aaa.xx" target="_blank" rel="noopener noreferrer"><span role="img" aria-label="file" class="anticon anticon-file ant-upload-list-item-icon"><svg focusable="false" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg></span></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="not-image" href="https://cdn.xxx.com/aaa.xx">not-image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/aaa.png/xx.xx" target="_blank" rel="noopener noreferrer"><span role="img" aria-label="file" class="anticon anticon-file ant-upload-list-item-icon"><svg focusable="false" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg></span></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="not-image" href="https://cdn.xxx.com/aaa.png/xx.xx">not-image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer"><img src="https://cdn.xxx.com/xx.xx/aaa.png" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/xx.xx/aaa.png">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer"><img src="data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/xx.xx/aaa.png">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/xx.xx/aaa.png?query=123" target="_blank" rel="noopener noreferrer"><img src="https://cdn.xxx.com/xx.xx/aaa.png?query=123" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/xx.xx/aaa.png?query=123">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/xx.xx/aaa.png#anchor" target="_blank" rel="noopener noreferrer"><img src="https://cdn.xxx.com/xx.xx/aaa.png#anchor" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/xx.xx/aaa.png#anchor">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
<div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot" target="_blank" rel="noopener noreferrer"><img src="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot" alt="image" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="image" href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot">image</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg focusable="false" class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div></span></div>
|
||||
</div></span>
|
||||
`;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('upload', { skip: ['upload-manually'] });
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import mock from 'xhr-mock';
|
||||
|
||||
export function setup() {
|
||||
mock.setup();
|
||||
mock.post('http://upload.com/', (req, res) => {
|
||||
req.headers({
|
||||
'content-length': 100,
|
||||
});
|
||||
req.body('thisisbody');
|
||||
return res;
|
||||
});
|
||||
}
|
||||
|
||||
export const teardown = mock.teardown.bind(mock);
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export const successRequest = ({ onSuccess, file }) => {
|
||||
setTimeout(() => {
|
||||
onSuccess(null, file);
|
||||
});
|
||||
};
|
||||
|
||||
export const errorRequest = ({ onError }) => {
|
||||
setTimeout(() => {
|
||||
onError();
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import Upload from '..';
|
||||
import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from '../utils';
|
||||
import PropsTypes from '../../_util/vue-types';
|
||||
import { uploadListProps } from '../interface';
|
||||
import { setup, teardown } from './mock';
|
||||
|
||||
uploadListProps.items = PropsTypes.any;
|
||||
|
||||
describe('Upload', () => {
|
||||
beforeEach(() => setup());
|
||||
afterEach(() => teardown());
|
||||
it('should get refs inside Upload in componentDidMount', () => {
|
||||
let ref = null;
|
||||
const APP = {
|
||||
mounted() {
|
||||
ref = this.$refs.input;
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Upload supportServerRender={false} action="">
|
||||
<input ref="input" />
|
||||
</Upload>
|
||||
);
|
||||
},
|
||||
};
|
||||
mount(APP);
|
||||
expect(ref).toBeDefined();
|
||||
});
|
||||
|
||||
xit('return promise in beforeUpload', done => {
|
||||
const data = jest.fn();
|
||||
const props = {
|
||||
props: {
|
||||
action: 'http://upload.com',
|
||||
beforeUpload: () => new Promise(resolve => setTimeout(() => resolve('success'), 100)),
|
||||
data,
|
||||
},
|
||||
listeners: {
|
||||
change: ({ file }) => {
|
||||
if (file.status !== 'uploading') {
|
||||
expect(data).toBeCalled();
|
||||
done();
|
||||
}
|
||||
},
|
||||
},
|
||||
slots: {
|
||||
default: () => <button>upload</button>,
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
wrapper.findComponent('ajaxUploader').vm.onChange({
|
||||
target: {
|
||||
files: [{ file: 'foo.png' }],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('upload promise return file in beforeUpload', done => {
|
||||
const data = jest.fn();
|
||||
const props = {
|
||||
action: 'http://upload.com',
|
||||
beforeUpload: file =>
|
||||
new Promise(resolve =>
|
||||
setTimeout(() => {
|
||||
const result = file;
|
||||
result.name = 'test.png';
|
||||
resolve(result);
|
||||
}, 100),
|
||||
),
|
||||
data,
|
||||
onChange: ({ file }) => {
|
||||
if (file.status !== 'uploading') {
|
||||
expect(data).toBeCalled();
|
||||
expect(file.name).toEqual('test.png');
|
||||
done();
|
||||
}
|
||||
},
|
||||
slots: {
|
||||
default: () => <button>upload</button>,
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
|
||||
const wrapper = mount(Upload, props);
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [{ file: 'foo.png' }],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('should not stop upload when return value of beforeUpload is false', done => {
|
||||
const data = jest.fn();
|
||||
const props = {
|
||||
action: 'http://upload.com',
|
||||
beforeUpload: () => false,
|
||||
data,
|
||||
onChange: ({ file }) => {
|
||||
expect(file instanceof File).toBe(true);
|
||||
expect(data).not.toBeCalled();
|
||||
done();
|
||||
},
|
||||
slots: {
|
||||
default: () => <button>upload</button>,
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('should increase percent automaticly when call autoUpdateProgress in IE', done => {
|
||||
let uploadInstance;
|
||||
let lastPercent = -1;
|
||||
const props = {
|
||||
props: {
|
||||
action: 'http://upload.com',
|
||||
},
|
||||
listeners: {
|
||||
change: ({ file }) => {
|
||||
if (file.percent === 0 && file.status === 'uploading') {
|
||||
// manually call it
|
||||
uploadInstance.autoUpdateProgress(0, file);
|
||||
}
|
||||
if (file.status === 'uploading') {
|
||||
expect(file.percent).toBeGreaterThan(lastPercent);
|
||||
lastPercent = file.percent;
|
||||
}
|
||||
if (file.status === 'done' || file.status === 'error') {
|
||||
done();
|
||||
}
|
||||
},
|
||||
},
|
||||
slots: {
|
||||
default: '<button>upload</button>',
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
uploadInstance = wrapper.vm;
|
||||
}, 0);
|
||||
});
|
||||
xit('should not stop upload when return value of beforeUpload is not false', done => {
|
||||
const data = jest.fn();
|
||||
const props = {
|
||||
props: {
|
||||
action: 'http://upload.com',
|
||||
beforeUpload() {},
|
||||
data,
|
||||
},
|
||||
listeners: {
|
||||
change: () => {
|
||||
expect(data).toBeCalled();
|
||||
done();
|
||||
},
|
||||
},
|
||||
slots: {
|
||||
default: '<button>upload</button>',
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
describe('util', () => {
|
||||
// https://github.com/react-component/upload/issues/36
|
||||
it('should T() return true', () => {
|
||||
const res = T();
|
||||
expect(res).toBe(true);
|
||||
});
|
||||
it('should be able to copy file instance', () => {
|
||||
const file = new File([], 'aaa.zip');
|
||||
const copiedFile = fileToObject(file);
|
||||
['uid', 'lastModified', 'lastModifiedDate', 'name', 'size', 'type'].forEach(key => {
|
||||
expect(key in copiedFile).toBe(true);
|
||||
});
|
||||
});
|
||||
it('should be able to progress from 0.1 ', () => {
|
||||
// 0.1 -> 0.98
|
||||
const getPercent = genPercentAdd();
|
||||
let curPercent = 0;
|
||||
curPercent = getPercent(curPercent);
|
||||
expect(curPercent).toBe(0.1);
|
||||
});
|
||||
|
||||
it('should be able to progress to 0.98 ', () => {
|
||||
// 0.1 -> 0.98
|
||||
const getPercent = genPercentAdd();
|
||||
let curPercent = 0;
|
||||
for (let i = 0; i < 500; i += 1) {
|
||||
curPercent = getPercent(curPercent);
|
||||
}
|
||||
expect(parseFloat(curPercent.toFixed(2))).toBe(0.98);
|
||||
});
|
||||
|
||||
it('should be able to get fileItem', () => {
|
||||
const file = { uid: '-1', name: 'item.jpg' };
|
||||
const fileList = [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'item.jpg',
|
||||
},
|
||||
];
|
||||
const targetItem = getFileItem(file, fileList);
|
||||
expect(targetItem).toBe(fileList[0]);
|
||||
});
|
||||
|
||||
it('should be able to remove fileItem', () => {
|
||||
const file = { uid: '-1', name: 'item.jpg' };
|
||||
const fileList = [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'item.jpg',
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'item2.jpg',
|
||||
},
|
||||
];
|
||||
const targetItem = removeFileItem(file, fileList);
|
||||
expect(targetItem).toEqual(fileList.slice(1));
|
||||
});
|
||||
|
||||
it('should not be able to remove fileItem', () => {
|
||||
const file = { uid: '-3', name: 'item.jpg' };
|
||||
const fileList = [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'item.jpg',
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'item2.jpg',
|
||||
},
|
||||
];
|
||||
const targetItem = removeFileItem(file, fileList);
|
||||
expect(targetItem).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
it('should support linkProps as object', () => {
|
||||
const fileList = [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'foo.png',
|
||||
status: 'done',
|
||||
url: 'http://www.baidu.com/xxx.png',
|
||||
linkProps: {
|
||||
download: 'image',
|
||||
rel: 'noopener',
|
||||
},
|
||||
},
|
||||
];
|
||||
const props = {
|
||||
props: {
|
||||
fileList,
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
||||
expect(linkNode.props().download).toBe('image');
|
||||
expect(linkNode.props().rel).toBe('noopener');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should support linkProps as json stringify', () => {
|
||||
const linkPropsString = JSON.stringify({
|
||||
download: 'image',
|
||||
rel: 'noopener',
|
||||
});
|
||||
const fileList = [
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'foo.png',
|
||||
status: 'done',
|
||||
url: 'http://www.baidu.com/xxx.png',
|
||||
linkProps: linkPropsString,
|
||||
},
|
||||
];
|
||||
const props = {
|
||||
props: {
|
||||
fileList,
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
||||
expect(linkNode.props().download).toBe('image');
|
||||
expect(linkNode.props().rel).toBe('noopener');
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import * as Vue from 'vue';
|
||||
import Upload from '..';
|
||||
import { errorRequest, successRequest } from './requests';
|
||||
import PropsTypes from '../../_util/vue-types';
|
||||
import { uploadListProps } from '../interface';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { h } from 'vue';
|
||||
|
||||
uploadListProps.items = PropsTypes.any;
|
||||
|
||||
const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
|
||||
const fileList = [
|
||||
{
|
||||
uid: -1,
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
|
||||
},
|
||||
{
|
||||
uid: -2,
|
||||
name: 'yyy.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
];
|
||||
|
||||
describe('Upload List', () => {
|
||||
// jsdom not support `createObjectURL` yet. Let's handle this.
|
||||
const originCreateObjectURL = window.URL.createObjectURL;
|
||||
window.URL.createObjectURL = jest.fn(() => '');
|
||||
const originHTMLCanvasElementGetContext = window.HTMLCanvasElement.prototype.getContext;
|
||||
window.HTMLCanvasElement.prototype.getContext = jest.fn(() => '');
|
||||
// https://github.com/ant-design/ant-design/issues/4653
|
||||
afterAll(() => {
|
||||
window.URL.createObjectURL = originCreateObjectURL;
|
||||
window.HTMLCanvasElement.prototype.getContext = originHTMLCanvasElementGetContext;
|
||||
});
|
||||
it('should use file.thumbUrl for <img /> in priority', done => {
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: fileList,
|
||||
listType: 'picture',
|
||||
action: '',
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
Vue.nextTick(() => {
|
||||
fileList.forEach((file, i) => {
|
||||
const linkNode = wrapper.findAll('.ant-upload-list-item-thumbnail')[i];
|
||||
const imgNode = wrapper.findAll('.ant-upload-list-item-thumbnail img')[i];
|
||||
expect(linkNode.attributes().href).toBe(file.url);
|
||||
expect(imgNode.attributes().src).toBe(file.thumbUrl);
|
||||
});
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/7269
|
||||
it('should remove correct item when uid is 0', done => {
|
||||
const list = [
|
||||
{
|
||||
uid: 0,
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
|
||||
},
|
||||
{
|
||||
uid: 1,
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
|
||||
},
|
||||
];
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: list,
|
||||
action: '',
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(async () => {
|
||||
expect(wrapper.findAll('.ant-upload-list-item').length).toBe(2);
|
||||
wrapper.findAll('.ant-upload-list-item')[0].find('.anticon-delete').trigger('click');
|
||||
await delay(400);
|
||||
// wrapper.update();
|
||||
expect(wrapper.findAll('.ant-upload-list-item').length).toBe(1);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('should be uploading when upload a file', done => {
|
||||
const props = {
|
||||
props: {
|
||||
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
customRequest: successRequest,
|
||||
onChange: ({ file }) => {
|
||||
if (file.status === 'uploading') {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
if (file.status === 'done') {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
},
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('handle error', done => {
|
||||
const props = {
|
||||
props: {
|
||||
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
customRequest: errorRequest,
|
||||
},
|
||||
listeners: {
|
||||
change: ({ file }) => {
|
||||
if (file.status !== 'uploading') {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
},
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('does concat filelist when beforeUpload returns false', done => {
|
||||
const handleChange = jest.fn();
|
||||
const props = {
|
||||
props: {
|
||||
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
listType: 'picture',
|
||||
defaultFileList: fileList,
|
||||
beforeUpload: () => false,
|
||||
onChange: handleChange,
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
|
||||
setTimeout(() => {
|
||||
const mockFile = new File(['foo'], 'foo.png', {
|
||||
type: 'image/png',
|
||||
});
|
||||
wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
|
||||
target: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.vm.sFileList.length).toBe(fileList.length + 1);
|
||||
expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
|
||||
done();
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/7762
|
||||
// it('work with form validation', (done) => {
|
||||
// let errors
|
||||
// const TestForm = {
|
||||
// methods: {
|
||||
// handleSubmit () {
|
||||
// const { validateFields } = this.form
|
||||
// validateFields((err) => {
|
||||
// errors = err
|
||||
// })
|
||||
// },
|
||||
// },
|
||||
// render () {
|
||||
// const { getFieldDecorator } = this.form
|
||||
|
||||
// return (
|
||||
// <Form onSubmit={this.handleSubmit}>
|
||||
// <Form.Item>
|
||||
// {getFieldDecorator('file', {
|
||||
// valuePropname: 'fileList',
|
||||
// getValueFromEvent: e => e.fileList,
|
||||
// rules: [
|
||||
// {
|
||||
// required: true,
|
||||
// validator: (rule, value, callback) => {
|
||||
// if (!value || value.length === 0) {
|
||||
// callback('file required')
|
||||
// } else {
|
||||
// callback()
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// })(
|
||||
// <Upload
|
||||
// beforeUpload={() => false}
|
||||
// >
|
||||
// <button>upload</button>
|
||||
// </Upload>
|
||||
// )}
|
||||
// </Form.Item>
|
||||
// </Form>
|
||||
// )
|
||||
// },
|
||||
// }
|
||||
|
||||
// const App = Form.create()(TestForm)
|
||||
// console.dir(App)
|
||||
// const wrapper = mount(() => {
|
||||
// return <App />
|
||||
// })
|
||||
// setTimeout(async () => {
|
||||
// wrapper.find(Form).trigger('submit')
|
||||
// expect(errors.file.errors).toEqual([{ message: 'file required', field: 'file' }])
|
||||
|
||||
// const mockFile = new File(['foo'], 'foo.png', {
|
||||
// type: 'image/png',
|
||||
// })
|
||||
// wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
|
||||
// target: {
|
||||
// files: [mockFile],
|
||||
// },
|
||||
// })
|
||||
// wrapper.find(Form).trigger('submit')
|
||||
// expect(errors).toBeNull()
|
||||
// done()
|
||||
// }, 0)
|
||||
// })
|
||||
|
||||
it('should support onPreview', async () => {
|
||||
const handlePreview = jest.fn();
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: fileList,
|
||||
listType: 'picture-card',
|
||||
action: '',
|
||||
onPreview: handlePreview,
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
await sleep(500);
|
||||
wrapper.findAll('.anticon-eye')[0].trigger('click');
|
||||
expect(handlePreview).toBeCalledWith(fileList[0]);
|
||||
wrapper.findAll('.anticon-eye')[1].trigger('click');
|
||||
expect(handlePreview).toBeCalledWith(fileList[1]);
|
||||
});
|
||||
|
||||
it('should support onRemove', done => {
|
||||
const handleRemove = jest.fn();
|
||||
const handleChange = jest.fn();
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: fileList,
|
||||
listType: 'picture-card',
|
||||
action: '',
|
||||
remove: handleRemove,
|
||||
onChange: handleChange,
|
||||
},
|
||||
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
jest.setTimeout(300000);
|
||||
setTimeout(async () => {
|
||||
wrapper.findAll('.anticon-delete')[0].trigger('click');
|
||||
expect(handleRemove).toBeCalledWith(fileList[0]);
|
||||
wrapper.findAll('.anticon-delete')[1].trigger('click');
|
||||
expect(handleRemove).toBeCalledWith(fileList[1]);
|
||||
await delay(0);
|
||||
expect(handleChange.mock.calls.length).toBe(2);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
xit('should generate thumbUrl from file', done => {
|
||||
const handlePreview = jest.fn();
|
||||
const newFileList = [...fileList];
|
||||
const newFile = { ...fileList[0], uid: -3, originFileObj: new File([], 'xxx.png') };
|
||||
delete newFile.thumbUrl;
|
||||
newFileList.push(newFile);
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: newFileList,
|
||||
listType: 'picture-card',
|
||||
action: '',
|
||||
onPreview: handlePreview,
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
setTimeout(async () => {
|
||||
const newFile = { ...fileList[2], uid: -4, originFileObj: new File([], 'xxx.png') };
|
||||
newFileList.push(newFile);
|
||||
wrapper.setProps({
|
||||
defaultFileList: [...newFileList],
|
||||
});
|
||||
await delay(200);
|
||||
expect(wrapper.vm.sFileList[2].thumbUrl).not.toBe(undefined);
|
||||
done();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
it('should non-image format file preview', done => {
|
||||
const list = [
|
||||
{
|
||||
name: 'not-image',
|
||||
status: 'done',
|
||||
uid: -3,
|
||||
url: 'https://cdn.xxx.com/aaa.zip',
|
||||
thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
|
||||
originFileObj: new File([], 'aaa.zip'),
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -4,
|
||||
url: 'https://cdn.xxx.com/aaa',
|
||||
},
|
||||
{
|
||||
name: 'not-image',
|
||||
status: 'done',
|
||||
uid: -5,
|
||||
url: 'https://cdn.xxx.com/aaa.xx',
|
||||
},
|
||||
{
|
||||
name: 'not-image',
|
||||
status: 'done',
|
||||
uid: -6,
|
||||
url: 'https://cdn.xxx.com/aaa.png/xx.xx',
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -7,
|
||||
url: 'https://cdn.xxx.com/xx.xx/aaa.png',
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -8,
|
||||
url: 'https://cdn.xxx.com/xx.xx/aaa.png',
|
||||
thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -9,
|
||||
url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=123',
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -10,
|
||||
url: 'https://cdn.xxx.com/xx.xx/aaa.png#anchor',
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
uid: -11,
|
||||
url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot',
|
||||
},
|
||||
];
|
||||
const props = {
|
||||
props: {
|
||||
defaultFileList: list,
|
||||
listType: 'picture',
|
||||
action: '',
|
||||
},
|
||||
slots: {
|
||||
default: () => h('button', 'upload'),
|
||||
},
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Upload, props);
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 用户头像
|
||||
en-US: Avatar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。
|
||||
|
||||
> `beforeUpload` 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
|
||||
|
||||
## en-US
|
||||
|
||||
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
|
||||
|
||||
> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="avatar"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
>
|
||||
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
||||
<div v-else>
|
||||
<loading-outlined v-if="loading"></loading-outlined>
|
||||
<plus-outlined v-else></plus-outlined>
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||
|
||||
function getBase64(img: Blob, callback: (base64Url: string) => void) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => callback(reader.result as string));
|
||||
reader.readAsDataURL(img);
|
||||
}
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LoadingOutlined,
|
||||
PlusOutlined,
|
||||
},
|
||||
setup() {
|
||||
const fileList = ref([]);
|
||||
const loading = ref<boolean>(false);
|
||||
const imageUrl = ref<string>('');
|
||||
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, (base64Url: string) => {
|
||||
imageUrl.value = base64Url;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false;
|
||||
message.error('upload error');
|
||||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (file: UploadProps['fileList'][number]) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
}
|
||||
return isJpgOrPng && isLt2M;
|
||||
};
|
||||
|
||||
return {
|
||||
fileList,
|
||||
loading,
|
||||
imageUrl,
|
||||
handleChange,
|
||||
beforeUpload,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.avatar-uploader > .ant-upload {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 点击上传
|
||||
en-US: Upload by clicking
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
经典款式，用户点击按钮弹出文件选择框。
|
||||
|
||||
## en-US
|
||||
|
||||
Classic mode. File selection dialog pops up when upload button is clicked.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:multiple="true"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
:headers="headers"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Click to Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { message } from 'ant-design-vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully`);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
};
|
||||
|
||||
const fileList = ref([]);
|
||||
return {
|
||||
fileList,
|
||||
headers: {
|
||||
authorization: 'authorization-text',
|
||||
},
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 已上传的文件列表
|
||||
en-US: Default Files
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `defaultFileList` 设置已上传的内容。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `defaultFileList` for uploaded files when page init.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const fileList = ref<UploadProps['fileList']>([
|
||||
{
|
||||
uid: '1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
response: 'Server Error 500', // custom error message to show
|
||||
url: 'http://www.baidu.com/xxx.png',
|
||||
},
|
||||
{
|
||||
uid: '2',
|
||||
name: 'yyy.png',
|
||||
status: 'done',
|
||||
url: 'http://www.baidu.com/yyy.png',
|
||||
},
|
||||
{
|
||||
uid: '3',
|
||||
name: 'zzz.png',
|
||||
status: 'error',
|
||||
response: 'Server Error 500', // custom error message to show
|
||||
url: 'http://www.baidu.com/zzz.png',
|
||||
},
|
||||
]);
|
||||
|
||||
const handleChange = ({ file, fileList }: UploadChangeParam) => {
|
||||
if (file.status !== 'uploading') {
|
||||
console.log(file, fileList);
|
||||
}
|
||||
};
|
||||
return {
|
||||
fileList,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 文件夹上传
|
||||
en-US: Upload directory
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
支持上传一个文件夹里的所有文件。
|
||||
|
||||
## en-US
|
||||
|
||||
You can select and upload a whole directory.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Upload Directory
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 拖拽上传
|
||||
en-US: Drag and Drop
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
把文件拖入指定区域，完成上传，同样支持点击上传。
|
||||
|
||||
设置 `multiple` 后，在 `IE10+` 可以一次上传多个文件。
|
||||
|
||||
## en-US
|
||||
|
||||
You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.
|
||||
|
||||
We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-upload-dragger
|
||||
v-model:fileList="fileList"
|
||||
name="file"
|
||||
:multiple="true"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
@change="handleChange"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<p class="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p class="ant-upload-hint">
|
||||
Support for a single or bulk upload. Strictly prohibit from uploading company data or other
|
||||
band files
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
InboxOutlined,
|
||||
},
|
||||
setup() {
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
const status = info.file.status;
|
||||
if (status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully.`);
|
||||
} else if (status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
};
|
||||
return {
|
||||
handleChange,
|
||||
fileList: ref([]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 完全控制的上传列表
|
||||
en-US: Complete control over file list
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况：
|
||||
|
||||
1. 上传列表数量的限制。
|
||||
|
||||
2. 读取远程路径并显示链接。
|
||||
|
||||
## en-US
|
||||
|
||||
You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows two circumstances:
|
||||
|
||||
1. limit the number of uploaded files.
|
||||
|
||||
2. read from response and show file link.
|
||||
</docs>
|
||||
|
||||
<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 lang="ts">
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const fileList = ref<UploadProps['fileList']>([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'http://www.baidu.com/xxx.png',
|
||||
},
|
||||
]);
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
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;
|
||||
};
|
||||
return {
|
||||
fileList,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<Basic />
|
||||
<Avatar />
|
||||
<DefaultFileList />
|
||||
<PictureCard />
|
||||
<FileList />
|
||||
<Drag />
|
||||
<PictureStyle />
|
||||
<UploadManually />
|
||||
<Directory />
|
||||
<PreviewFile />
|
||||
<TransformFile />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Avatar from './avatar.vue';
|
||||
import DefaultFileList from './defaultFileList.vue';
|
||||
import PictureCard from './picture-card.vue';
|
||||
import FileList from './fileList.vue';
|
||||
import Drag from './drag.vue';
|
||||
import PictureStyle from './picture-style.vue';
|
||||
import UploadManually from './upload-manually.vue';
|
||||
import Directory from './directory.vue';
|
||||
import PreviewFile from './preview-file.vue';
|
||||
import TransformFile from './transform-file.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Avatar,
|
||||
DefaultFileList,
|
||||
PictureCard,
|
||||
FileList,
|
||||
Drag,
|
||||
PictureStyle,
|
||||
UploadManually,
|
||||
Directory,
|
||||
PreviewFile,
|
||||
TransformFile,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 照片墙
|
||||
en-US: Pictures Wall
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
|
||||
|
||||
## en-US
|
||||
|
||||
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="clearfix">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<div v-if="fileList.length < 8">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||
|
||||
function getBase64(file: File) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PlusOutlined,
|
||||
},
|
||||
setup() {
|
||||
const previewVisible = ref<boolean>(false);
|
||||
const previewImage = ref<string | undefined>('');
|
||||
|
||||
const fileList = ref<UploadProps['fileList']>([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-3',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-4',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-5',
|
||||
name: 'image.png',
|
||||
status: 'error',
|
||||
},
|
||||
]);
|
||||
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false;
|
||||
};
|
||||
const handlePreview = async (file: UploadProps['fileList'][number]) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = (await getBase64(file.originFileObj)) as string;
|
||||
}
|
||||
previewImage.value = file.url || file.preview;
|
||||
previewVisible.value = true;
|
||||
};
|
||||
const handleChange = ({ fileList: newFileList }: UploadChangeParam) => {
|
||||
fileList.value = newFileList;
|
||||
};
|
||||
|
||||
return {
|
||||
previewVisible,
|
||||
previewImage,
|
||||
fileList,
|
||||
handleCancel,
|
||||
handlePreview,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<docs>
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 图片列表样式
|
||||
en-US: Pictures with list style
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
上传文件为图片，可展示本地缩略图。`IE8/9` 不支持浏览器本地缩略图展示（[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)），可以写 `thumbUrl` 属性来代替。
|
||||
|
||||
## en-US
|
||||
|
||||
If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<br />
|
||||
<br />
|
||||
<a-upload
|
||||
v-model:file-list="fileList1"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const fileList = ref<UploadProps['fileList']>([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'yyy.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
]);
|
||||
const fileList1 = ref<UploadProps['fileList']>([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'yyy.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
]);
|
||||
return {
|
||||
fileList,
|
||||
fileList1,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
/* tile uploaded pictures */
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-animate-enter) {
|
||||
animation-name: uploadAnimateInlineIn;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-animate-leave) {
|
||||
animation-name: uploadAnimateInlineOut;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<docs>
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 自定义预览
|
||||
en-US: Customize preview file
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义本地预览，用于处理非图片格式文件（例如视频文件）。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize local preview. Can handle with non-image format files such as video.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
:preview-file="previewFile"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const previewFile = async (file: any): Promise<Response> => {
|
||||
console.log('Your upload file:', file);
|
||||
// Your process logic. Here we just mock to the same file
|
||||
const res = await fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
|
||||
method: 'POST',
|
||||
body: file,
|
||||
});
|
||||
const { thumbnail } = await res.json();
|
||||
return thumbnail;
|
||||
};
|
||||
return {
|
||||
previewFile,
|
||||
fileList: ref([]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<docs>
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 上传前转换文件
|
||||
en-US: Transform file before request
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `beforeUpload` 转换上传的文件（例如添加水印）。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `beforeUpload` for transform file before request such as add a watermark.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
:transform-file="transformFile"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const transformFile = (file: any) => {
|
||||
return new Promise(resolve => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const img: HTMLImageElement = document.createElement('img');
|
||||
img.src = reader.result as string;
|
||||
img.onload = () => {
|
||||
const ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('Ant Design', 20, 20);
|
||||
canvas.toBlob(resolve);
|
||||
};
|
||||
};
|
||||
});
|
||||
};
|
||||
return {
|
||||
transformFile,
|
||||
fileList: ref([]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 手动上传
|
||||
en-US: Upload manually
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`beforeUpload` 返回 `false` 后，手动上传文件。
|
||||
|
||||
## en-US
|
||||
|
||||
Upload files manually after `beforeUpload` returns `false`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="clearfix">
|
||||
<a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
Select File
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="fileList.length === 0"
|
||||
:loading="uploading"
|
||||
style="margin-top: 16px"
|
||||
@click="handleUpload"
|
||||
>
|
||||
{{ uploading ? 'Uploading' : 'Start Upload' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import request from 'umi-request';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UploadOutlined,
|
||||
},
|
||||
setup() {
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
const uploading = ref<boolean>(false);
|
||||
|
||||
const handleRemove: UploadProps['onRemove'] = file => {
|
||||
const index = fileList.value.indexOf(file);
|
||||
const newFileList = fileList.value.slice();
|
||||
newFileList.splice(index, 1);
|
||||
fileList.value = newFileList;
|
||||
};
|
||||
|
||||
const beforeUpload: UploadProps['beforeUpload'] = file => {
|
||||
fileList.value = [...fileList.value, file];
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
const formData = new FormData();
|
||||
fileList.value.forEach((file: UploadProps['fileList'][number]) => {
|
||||
formData.append('files[]', file as any);
|
||||
});
|
||||
uploading.value = true;
|
||||
|
||||
// You can use any AJAX library you like
|
||||
request('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
|
||||
method: 'post',
|
||||
data: formData,
|
||||
})
|
||||
.then(() => {
|
||||
fileList.value = [];
|
||||
uploading.value = false;
|
||||
message.success('upload successfully.');
|
||||
})
|
||||
.catch(() => {
|
||||
uploading.value = false;
|
||||
message.error('upload failed.');
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
fileList,
|
||||
uploading,
|
||||
handleRemove,
|
||||
beforeUpload,
|
||||
handleUpload,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Upload
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
||||
---
|
||||
|
||||
Upload file by selecting or dragging.
|
||||
|
||||
## When To Use
|
||||
|
||||
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
|
||||
|
||||
- When you need to upload one or more files.
|
||||
- When you need to show the process of uploading.
|
||||
- When you need to upload files by dragging and dropping.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
|
||||
| action | Uploading URL | string\|(file) => `Promise` | - | |
|
||||
| method | http method of upload request | string | `post` | 1.5.0 |
|
||||
| directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |
|
||||
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - | |
|
||||
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - | |
|
||||
| data | Uploading params or function which can return uploading params. | object\|function(file) | - | |
|
||||
| disabled | disable upload button | boolean | false | |
|
||||
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\[] | - | |
|
||||
| headers | Set request headers, valid above IE10. | object | - | |
|
||||
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` | |
|
||||
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
|
||||
| name | The name of uploading file | string | `file` | |
|
||||
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - | 1.5.0 |
|
||||
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true | |
|
||||
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false | |
|
||||
| withCredentials | ajax upload with cookie sent | boolean | false | |
|
||||
| openFileDialogOnClick | click open file dialog | boolean | true | |
|
||||
| remove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject. | Function(file): `boolean | Promise` | - | |
|
||||
| transformFile | Customize transform file before request | Function(file): `string | Blob | File | Promise<string | Blob | File>` | - | 1.5.0 |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| change | A callback function, can be executed when uploading state is changing. See [change](#change) | Function | - | |
|
||||
| preview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - | |
|
||||
| download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | 1.5.0 |
|
||||
| reject | A callback function, will be executed when drop files is not accept. | Function(fileList) | - | |
|
||||
|
||||
### change
|
||||
|
||||
> The function will be called when uploading is in progress, completed or failed
|
||||
|
||||
When uploading state change, it returns:
|
||||
|
||||
```jsx
|
||||
{
|
||||
file: { /* ... */ },
|
||||
fileList: [ /* ... */ ],
|
||||
event: { /* ... */ },
|
||||
}
|
||||
```
|
||||
|
||||
1. `file` File object for the current operation.
|
||||
|
||||
```jsx
|
||||
{
|
||||
uid: 'uid', // unique identifier, negative is recommend, to prevent interference with internal generated id
|
||||
name: 'xx.png', // file name
|
||||
status: 'done', // options：uploading, done, error, removed
|
||||
response: '{"status": "success"}', // response from server
|
||||
linkProps: '{"download": "image"}', // additional html props of file link
|
||||
xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
|
||||
}
|
||||
```
|
||||
|
||||
2. `fileList` current list of files
|
||||
3. `event` response from server, including uploading progress, supported by advanced browsers.
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import type { App } from 'vue';
|
||||
import Upload from './Upload';
|
||||
import Dragger from './Dragger';
|
||||
|
||||
export type { UploadProps, UploadListProps, UploadChangeParam } from './interface';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const UploadDragger = Dragger;
|
||||
|
||||
export default Object.assign(Upload, {
|
||||
Dragger,
|
||||
install(app: App) {
|
||||
app.component(Upload.name, Upload);
|
||||
app.component(Dragger.name, Dragger);
|
||||
return app;
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 上传
|
||||
type: 数据录入
|
||||
title: Upload
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
||||
---
|
||||
|
||||
文件选择上传和拖拽上传控件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
|
||||
|
||||
- 当需要上传一个或一些文件时。
|
||||
- 当需要展现上传的进度时。
|
||||
- 当需要使用拖拽交互时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 | |
|
||||
| action | 上传的地址 | string\|(file) => `Promise` | 无 | |
|
||||
| method | 上传请求的 http method | string | `post` | 1.5.0 |
|
||||
| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | |
|
||||
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。**注意：IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 | |
|
||||
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 | |
|
||||
| data | 上传所需参数或返回上传参数的方法 | object\|(file) => object | 无 | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| fileList | 已经上传的文件列表（受控） | object\[] | 无 | |
|
||||
| headers | 设置上传的请求头部，IE10 以上有效 | object | 无 | |
|
||||
| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` | |
|
||||
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | boolean | false | |
|
||||
| name | 发到后台的文件参数名 | string | `file` | |
|
||||
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | 1.5.0 |
|
||||
| showUploadList | 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true | |
|
||||
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false | |
|
||||
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
||||
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
||||
| remove | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。 | Function(file): `boolean | Promise` | 无 | |
|
||||
| transformFile | 在上传之前转换文件。支持返回一个 Promise 对象 | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无 | 1.5.0 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| change | 上传文件改变时的状态，详见 [change](#change) | Function | 无 | |
|
||||
| preview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | |
|
||||
| download | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 | 1.5.0 |
|
||||
| reject | 拖拽文件不符合 accept 类型时的回调 | Function(fileList) | 无 | |
|
||||
|
||||
### change
|
||||
|
||||
> 上传中、完成、失败都会调用这个函数。
|
||||
|
||||
文件状态改变的回调，返回为：
|
||||
|
||||
```jsx
|
||||
{
|
||||
file: { /* ... */ },
|
||||
fileList: [ /* ... */ ],
|
||||
event: { /* ... */ },
|
||||
}
|
||||
```
|
||||
|
||||
1. `file` 当前操作的文件对象。
|
||||
|
||||
```jsx
|
||||
{
|
||||
uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
|
||||
name: 'xx.png', // 文件名
|
||||
status: 'done', // 状态有：uploading done error removed
|
||||
response: '{"status": "success"}', // 服务端响应内容
|
||||
linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
|
||||
xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
|
||||
}
|
||||
```
|
||||
|
||||
2. `fileList` 当前的文件列表。
|
||||
3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
import type {
|
||||
RcFile as OriRcFile,
|
||||
UploadRequestOption as RcCustomRequestOptions,
|
||||
} from '../vc-upload/interface';
|
||||
import type { ProgressProps } from '../progress';
|
||||
import type { VueNode } from '../_util/type';
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
|
||||
export interface RcFile extends OriRcFile {
|
||||
readonly lastModifiedDate: Date;
|
||||
}
|
||||
|
||||
export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
|
||||
|
||||
export interface HttpRequestHeader {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export interface UploadFile<T = any> {
|
||||
uid: string;
|
||||
size?: number;
|
||||
name: string;
|
||||
fileName?: string;
|
||||
lastModified?: number;
|
||||
lastModifiedDate?: Date;
|
||||
url?: string;
|
||||
status?: UploadFileStatus;
|
||||
percent?: number;
|
||||
thumbUrl?: string;
|
||||
originFileObj?: RcFile;
|
||||
response?: T;
|
||||
error?: any;
|
||||
linkProps?: any;
|
||||
type?: string;
|
||||
xhr?: T;
|
||||
preview?: string;
|
||||
}
|
||||
|
||||
export interface InternalUploadFile<T = any> extends UploadFile<T> {
|
||||
originFileObj: RcFile;
|
||||
}
|
||||
|
||||
export interface UploadChangeParam<T = UploadFile> {
|
||||
// https://github.com/ant-design/ant-design/issues/14420
|
||||
file: T;
|
||||
fileList: UploadFile[];
|
||||
event?: { percent: number };
|
||||
}
|
||||
|
||||
// export interface ShowUploadListInterface {
|
||||
// showRemoveIcon?: boolean;
|
||||
// showPreviewIcon?: boolean;
|
||||
// showDownloadIcon?: boolean;
|
||||
// removeIcon?: VueNode | ((file: UploadFile) => VueNode);
|
||||
// downloadIcon?: VueNode | ((file: UploadFile) => VueNode);
|
||||
// previewIcon?: VueNode | ((file: UploadFile) => VueNode);
|
||||
// }
|
||||
|
||||
export interface UploadLocale {
|
||||
uploading?: string;
|
||||
removeFile?: string;
|
||||
downloadFile?: string;
|
||||
uploadError?: string;
|
||||
previewFile?: string;
|
||||
}
|
||||
|
||||
export type UploadType = 'drag' | 'select';
|
||||
export type UploadListType = 'text' | 'picture' | 'picture-card';
|
||||
export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
|
||||
|
||||
export type ItemRender<T = any> = (opt: {
|
||||
originNode: VueNode;
|
||||
file: UploadFile;
|
||||
fileList: Array<UploadFile<T>>;
|
||||
actions: {
|
||||
download: () => void;
|
||||
preview: () => void;
|
||||
remove: () => void;
|
||||
};
|
||||
}) => VueNode;
|
||||
|
||||
type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
|
||||
type TransformFileHandler = (
|
||||
file: RcFile,
|
||||
) => string | Blob | File | PromiseLike<string | Blob | File>;
|
||||
type BeforeUploadValueType = void | boolean | string | Blob | File;
|
||||
|
||||
function uploadProps<T = any>() {
|
||||
return {
|
||||
capture: [Boolean, String] as PropType<boolean | 'user' | 'environment'>,
|
||||
type: String as PropType<UploadType>,
|
||||
name: String,
|
||||
defaultFileList: Array as PropType<Array<UploadFile<T>>>,
|
||||
fileList: Array as PropType<Array<UploadFile<T>>>,
|
||||
action: [String, Function] as PropType<
|
||||
string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>)
|
||||
>,
|
||||
directory: Boolean,
|
||||
data: [Object, Function] as PropType<
|
||||
| Record<string, unknown>
|
||||
| ((file: UploadFile<T>) => Record<string, unknown> | Promise<Record<string, unknown>>)
|
||||
>,
|
||||
method: String as PropType<'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch'>,
|
||||
headers: Object as PropType<HttpRequestHeader>,
|
||||
showUploadList: Boolean,
|
||||
multiple: Boolean,
|
||||
accept: String,
|
||||
beforeUpload: Function as PropType<
|
||||
(file: RcFile, FileList: RcFile[]) => BeforeUploadValueType | Promise<BeforeUploadValueType>
|
||||
>,
|
||||
onChange: Function as PropType<(info: UploadChangeParam<T>) => void>,
|
||||
onDrop: Function as PropType<(event: DragEvent) => void>,
|
||||
listType: String as PropType<UploadListType>,
|
||||
onPreview: Function as PropType<(file: UploadFile<T>) => void>,
|
||||
onDownload: Function as PropType<(file: UploadFile<T>) => void>,
|
||||
onRemove: Function as PropType<
|
||||
(file: UploadFile<T>) => void | boolean | Promise<void | boolean>
|
||||
>,
|
||||
supportServerRender: Boolean,
|
||||
disabled: Boolean,
|
||||
prefixCls: String,
|
||||
customRequest: Function as PropType<(options: RcCustomRequestOptions) => void>,
|
||||
withCredentials: Boolean,
|
||||
openFileDialogOnClick: Boolean,
|
||||
locale: Object as PropType<UploadLocale>,
|
||||
id: String,
|
||||
previewFile: Function as PropType<PreviewFileHandler>,
|
||||
/** @deprecated Please use `beforeUpload` directly */
|
||||
transformFile: Function as PropType<TransformFileHandler>,
|
||||
iconRender: Function as PropType<
|
||||
(opt: { file: UploadFile<T>; listType?: UploadListType }) => VueNode
|
||||
>,
|
||||
isImageUrl: Function as PropType<(file: UploadFile) => boolean>,
|
||||
progress: Object as PropType<UploadListProgressProps>,
|
||||
itemRender: Function as PropType<ItemRender<T>>,
|
||||
/** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
|
||||
maxCount: Number,
|
||||
height: [Number, String],
|
||||
|
||||
showRemoveIcon: Boolean,
|
||||
showDownloadIcon: Boolean,
|
||||
showPreviewIcon: Boolean,
|
||||
removeIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
downloadIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
previewIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
};
|
||||
}
|
||||
|
||||
export type UploadProps = Partial<ExtractPropTypes<ReturnType<typeof uploadProps>>>;
|
||||
|
||||
export interface UploadState<T = any> {
|
||||
fileList: UploadFile<T>[];
|
||||
dragState: string;
|
||||
}
|
||||
|
||||
function uploadListProps<T = any>() {
|
||||
return {
|
||||
listType: String as PropType<UploadListType>,
|
||||
onPreview: Function as PropType<(file: UploadFile<T>) => void>,
|
||||
onDownload: Function as PropType<(file: UploadFile<T>) => void>,
|
||||
onRemove: Function as PropType<(file: UploadFile<T>) => void | boolean>,
|
||||
items: Array as PropType<Array<UploadFile<T>>>,
|
||||
progress: Object as PropType<UploadListProgressProps>,
|
||||
prefixCls: String as PropType<string>,
|
||||
showRemoveIcon: Boolean,
|
||||
showDownloadIcon: Boolean,
|
||||
showPreviewIcon: Boolean,
|
||||
removeIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
downloadIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
previewIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
|
||||
locale: Object as PropType<UploadLocale>,
|
||||
previewFile: Function as PropType<PreviewFileHandler>,
|
||||
iconRender: Function as PropType<
|
||||
(opt: { file: UploadFile<T>; listType?: UploadListType }) => VueNode
|
||||
>,
|
||||
isImageUrl: Function as PropType<(file: UploadFile) => boolean>,
|
||||
appendAction: Function as PropType<() => VueNode>,
|
||||
itemRender: Function as PropType<ItemRender<T>>,
|
||||
};
|
||||
}
|
||||
|
||||
export type UploadListProps = Partial<ExtractPropTypes<ReturnType<typeof uploadListProps>>>;
|
||||
export { uploadProps, uploadListProps };
|
||||
|
|
@ -0,0 +1,589 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
@upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
@upload-picture-card-size: 104px;
|
||||
@upload-picture-card-border-style: @border-style-base;
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
outline: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&&-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&&-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&&-select-picture-card {
|
||||
width: @upload-picture-card-size;
|
||||
height: @upload-picture-card-size;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
background-color: @background-color-light;
|
||||
border: @border-width-base dashed @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
> .@{upload-prefix-cls} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
.@{upload-prefix-cls}-disabled& {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&&-drag {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: @background-color-light;
|
||||
border: @border-width-base dashed @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
padding: @padding-md 0;
|
||||
}
|
||||
|
||||
&.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
|
||||
border-color: @primary-7;
|
||||
}
|
||||
|
||||
&.@{upload-prefix-cls}-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-btn {
|
||||
display: table;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-drag-container {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:not(.@{upload-prefix-cls}-disabled):hover {
|
||||
border-color: @primary-5;
|
||||
}
|
||||
|
||||
p.@{upload-prefix-cls}-drag-icon {
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @primary-5;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p.@{upload-prefix-cls}-text {
|
||||
margin: 0 0 4px;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
p.@{upload-prefix-cls}-hint {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-plus {
|
||||
color: @disabled-color;
|
||||
font-size: 30px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
&:hover .@{iconfont-css-prefix}-plus {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&-picture-card-wrapper {
|
||||
.clearfix();
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list {
|
||||
.reset-component();
|
||||
.clearfix();
|
||||
line-height: @line-height-base;
|
||||
|
||||
// ============================ Item ============================
|
||||
&-item {
|
||||
position: relative;
|
||||
height: @line-height-base * @font-size-base;
|
||||
margin-top: @margin-xs;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&-name {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: @font-size-base + 8px;
|
||||
overflow: hidden;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-card-actions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
&-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
&-btn.@{ant-prefix}-btn-sm {
|
||||
height: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.picture {
|
||||
top: 22px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&-btn:focus,
|
||||
&.picture &-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @upload-actions-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-loading,
|
||||
.@{upload-prefix-cls}-text-icon {
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: (@font-size-base / 2) - 2px;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 4px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 10px;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &-info {
|
||||
background-color: @item-hover-bg;
|
||||
}
|
||||
|
||||
&:hover .@{iconfont-css-prefix}-close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover &-card-actions-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-error,
|
||||
&-error .@{upload-prefix-cls}-text-icon > .@{iconfont-css-prefix},
|
||||
&-error &-name {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-progress {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
width: 100%;
|
||||
padding-left: @font-size-base + 12px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =================== Picture & Picture Card ===================
|
||||
&-picture,
|
||||
&-picture-card {
|
||||
.@{upload-item} {
|
||||
position: relative;
|
||||
height: 66px;
|
||||
padding: @padding-xs;
|
||||
border: @border-width-base @upload-picture-card-border-style @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-error {
|
||||
border-color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-info {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.@{upload-item}:hover .@{upload-item}-info {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.@{upload-item}-uploading {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
|
||||
.@{upload-item}-error .@{upload-item}-thumbnail {
|
||||
.@{iconfont-css-prefix} {
|
||||
svg path {
|
||||
&[fill='#e6f7ff'] {
|
||||
fill: @error-color-deprecated-bg;
|
||||
}
|
||||
|
||||
&[fill='#1890ff'] {
|
||||
fill: @error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 26px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail img {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.@{upload-item}-name {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 48px;
|
||||
overflow: hidden;
|
||||
line-height: 44px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.@{upload-item}-uploading .@{upload-item}-name {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.@{upload-item}-progress {
|
||||
bottom: 14px;
|
||||
width: ~'calc(100% - 24px)';
|
||||
margin-top: 0;
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Picture Card ========================
|
||||
&-picture-card {
|
||||
&-container {
|
||||
display: inline-block;
|
||||
width: @upload-picture-card-size;
|
||||
height: @upload-picture-card-size;
|
||||
margin: 0 @margin-xs @margin-xs 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.@{upload-prefix-cls}-list::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.@{upload-item} {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.@{upload-item}-info {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: fade(@black, 50%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}:hover .@{upload-item}-info::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.@{upload-item}-actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{iconfont-css-prefix}-eye,
|
||||
.@{iconfont-css-prefix}-download,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
z-index: 10;
|
||||
width: 16px;
|
||||
margin: 0 4px;
|
||||
color: @text-color-dark;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @text-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-info:hover + .@{upload-item}-actions,
|
||||
.@{upload-item}-actions:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail,
|
||||
.@{upload-item}-thumbnail img {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.@{upload-item}-name {
|
||||
display: none;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{upload-item}-file + .@{upload-item}-name {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.@{upload-item}-uploading {
|
||||
&.@{upload-item} {
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
|
||||
.@{upload-item}-info {
|
||||
height: auto;
|
||||
|
||||
&::before,
|
||||
.@{iconfont-css-prefix}-eye,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-progress {
|
||||
bottom: 32px;
|
||||
width: calc(100% - 14px);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Picture & Text =======================
|
||||
&-text,
|
||||
&-picture {
|
||||
&-container {
|
||||
transition: opacity @animation-duration-slow, height @animation-duration-slow;
|
||||
|
||||
&::before {
|
||||
display: table;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// Don't know why span here, just stretch it
|
||||
.@{upload-prefix-cls}-span {
|
||||
display: block;
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// text & picture no need this additional element.
|
||||
// But it used for picture-card, let's keep it.
|
||||
.@{upload-prefix-cls}-span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name {
|
||||
flex: auto;
|
||||
margin: 0;
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
|
||||
.@{upload-item}-card-actions {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Text ============================
|
||||
&-text {
|
||||
.@{upload-prefix-cls}-text-icon {
|
||||
.@{iconfont-css-prefix} {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================== Motion ===========================
|
||||
.@{upload-prefix-cls}-animate-inline-appear,
|
||||
.@{upload-prefix-cls}-animate-inline-enter,
|
||||
.@{upload-prefix-cls}-animate-inline-leave {
|
||||
animation-duration: @animation-duration-slow;
|
||||
animation-fill-mode: @ease-in-out-circ;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-animate-inline-appear,
|
||||
.@{upload-prefix-cls}-animate-inline-enter {
|
||||
animation-name: uploadAnimateInlineIn;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-animate-inline-leave {
|
||||
animation-name: uploadAnimateInlineOut;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes uploadAnimateInlineIn {
|
||||
from {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes uploadAnimateInlineOut {
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
|
@ -2,5 +2,6 @@ import '../../style/index.less';
|
|||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../button/style';
|
||||
import '../../progress/style';
|
||||
import '../../tooltip/style';
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
@upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&&-select-picture-card {
|
||||
.@{upload-prefix-cls}-rtl& {
|
||||
margin-right: auto;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-item-list-type-text {
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-name {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-card-actions {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-progress {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-picture,
|
||||
&-picture-card {
|
||||
.@{upload-item}-info {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-icon {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 0 8px 0 0;
|
||||
padding-right: 48px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-progress {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-picture-card {
|
||||
&-container {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
margin: 0 0 @margin-xs @margin-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-actions {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-file + .@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import type { RcFile, UploadFile, InternalUploadFile } from './interface';
|
||||
|
||||
export function file2Obj(file: RcFile): InternalUploadFile {
|
||||
return {
|
||||
...file,
|
||||
lastModified: file.lastModified,
|
||||
lastModifiedDate: file.lastModifiedDate,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
uid: file.uid,
|
||||
percent: 0,
|
||||
originFileObj: file,
|
||||
};
|
||||
}
|
||||
|
||||
/** Upload fileList. Replace file if exist or just push into it. */
|
||||
export function updateFileList(file: UploadFile<any>, fileList: UploadFile<any>[]) {
|
||||
const nextFileList = [...fileList];
|
||||
const fileIndex = nextFileList.findIndex(({ uid }: UploadFile) => uid === file.uid);
|
||||
if (fileIndex === -1) {
|
||||
nextFileList.push(file);
|
||||
} else {
|
||||
nextFileList[fileIndex] = file;
|
||||
}
|
||||
return nextFileList;
|
||||
}
|
||||
|
||||
export function getFileItem(file: RcFile, fileList: UploadFile[]) {
|
||||
const matchKey = file.uid !== undefined ? 'uid' : 'name';
|
||||
return fileList.filter(item => item[matchKey] === file[matchKey])[0];
|
||||
}
|
||||
|
||||
export function removeFileItem(file: UploadFile, fileList: UploadFile[]) {
|
||||
const matchKey = file.uid !== undefined ? 'uid' : 'name';
|
||||
const removed = fileList.filter(item => item[matchKey] !== file[matchKey]);
|
||||
if (removed.length === fileList.length) {
|
||||
return null;
|
||||
}
|
||||
return removed;
|
||||
}
|
||||
|
||||
// ==================== Default Image Preview ====================
|
||||
const extname = (url = '') => {
|
||||
const temp = url.split('/');
|
||||
const filename = temp[temp.length - 1];
|
||||
const filenameWithoutSuffix = filename.split(/#|\?/)[0];
|
||||
return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
|
||||
};
|
||||
|
||||
const isImageFileType = (type: string): boolean => type.indexOf('image/') === 0;
|
||||
|
||||
export const isImageUrl = (file: UploadFile): boolean => {
|
||||
if (file.type && !file.thumbUrl) {
|
||||
return isImageFileType(file.type);
|
||||
}
|
||||
const url: string = (file.thumbUrl || file.url || '') as string;
|
||||
const extension = extname(url);
|
||||
if (
|
||||
/^data:image\//.test(url) ||
|
||||
/(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i.test(extension)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (/^data:/.test(url)) {
|
||||
// other file types of base64
|
||||
return false;
|
||||
}
|
||||
if (extension) {
|
||||
// other file types which have extension
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const MEASURE_SIZE = 200;
|
||||
export function previewImage(file: File | Blob): Promise<string> {
|
||||
return new Promise(resolve => {
|
||||
if (!file.type || !isImageFileType(file.type)) {
|
||||
resolve('');
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = MEASURE_SIZE;
|
||||
canvas.height = MEASURE_SIZE;
|
||||
canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`;
|
||||
document.body.appendChild(canvas);
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const { width, height } = img;
|
||||
|
||||
let drawWidth = MEASURE_SIZE;
|
||||
let drawHeight = MEASURE_SIZE;
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
|
||||
if (width > height) {
|
||||
drawHeight = height * (MEASURE_SIZE / width);
|
||||
offsetY = -(drawHeight - drawWidth) / 2;
|
||||
} else {
|
||||
drawWidth = width * (MEASURE_SIZE / height);
|
||||
offsetX = -(drawWidth - drawHeight) / 2;
|
||||
}
|
||||
|
||||
ctx!.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
|
||||
const dataURL = canvas.toDataURL();
|
||||
document.body.removeChild(canvas);
|
||||
|
||||
resolve(dataURL);
|
||||
};
|
||||
img.src = window.URL.createObjectURL(file);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue