feat: upload component supports accept property
This commit is contained in:
parent
80eb229696
commit
a19311cb24
@ -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",
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user