feat: upload component supports accept property

This commit is contained in:
chenos 2021-04-22 18:44:55 +08:00
parent 80eb229696
commit a19311cb24
2 changed files with 10 additions and 4 deletions

View File

@ -32,6 +32,7 @@
"ahooks": "^2.9.3", "ahooks": "^2.9.3",
"antd": "^4.13.0", "antd": "^4.13.0",
"array-move": "^3.0.1", "array-move": "^3.0.1",
"attr-accept": "^2.2.2",
"clean-deep": "^3.4.0", "clean-deep": "^3.4.0",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"lint-staged": "^10.0.7", "lint-staged": "^10.0.7",

View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { connect } from '@formily/react-schema-renderer'; import { connect } from '@formily/react-schema-renderer';
import { Button, Upload as AntdUpload, Popconfirm } from 'antd'; import { Button, Upload as AntdUpload, Popconfirm, message } from 'antd';
import { toArr, isArr, isEqual, mapStyledProps } from '../shared'; import { toArr, isArr, isEqual, mapStyledProps } from '../shared';
import { import {
LoadingOutlined, LoadingOutlined,
@ -12,6 +12,7 @@ const { Dragger: UploadDragger } = AntdUpload;
import get from 'lodash/get'; import get from 'lodash/get';
import findIndex from 'lodash/findIndex'; import findIndex from 'lodash/findIndex';
import Lightbox from 'react-image-lightbox'; import Lightbox from 'react-image-lightbox';
import attrAccept from 'attr-accept';
const exts = [ const exts = [
{ {
@ -185,7 +186,7 @@ export function getImgUrls(value) {
export const Upload = connect({ export const Upload = connect({
getProps: mapStyledProps, getProps: mapStyledProps,
})(props => { })(props => {
const { multiple = true, value, onChange } = props; const { accept, multiple = true, value, onChange } = props;
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [imgIndex, setImgIndex] = useState(0); const [imgIndex, setImgIndex] = useState(0);
const [fileList, setFileList] = useState(toFileList(value)); const [fileList, setFileList] = useState(toFileList(value));
@ -193,8 +194,12 @@ export const Upload = connect({
name: 'file', name: 'file',
headers: {}, headers: {},
action: `${process.env.API}/attachments:upload`, action: `${process.env.API}/attachments:upload`,
onChange({ fileList }) { onChange({ fileList, file, ...others }) {
console.log(fileList); // console.log({fileList, file, others});
if (accept && !attrAccept(file, accept)) {
message.error('不支持上传当前格式的文件');
return;
}
setFileList(fileList); setFileList(fileList);
const list = toValues(fileList); const list = toValues(fileList);
onChange(multiple ? list : list.shift() || null); onChange(multiple ? list : list.shift() || null);