1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, {useState} from 'react';
import {useRequest} from 'umi'
import {Form, message, Upload} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { _apiUrl_ } from '@/utils/common';
import style from './index.less';
import {fetchFileDelete} from '@/services/device'
const UploadForm = (props) => {
const {name, title, listType = 'picture-card', fileType = 'image'} = props;
const handleChange = info => {
const file = info.file;
if (file?.status === 'done'){
if (!file.response.success) {
message.error(file.response.message)
}
}
};
const handleRemove = async (file) => {
if (file?.fileId){
const result = await fetchFileDelete(file?.fileId);
return result.success
}else {
return true
}
}
const options = {
headers: {
Authorization: `bearer ${localStorage.getItem("Authorization")}`
},
action: `${_apiUrl_}/account-service/file/${ fileType }`,
name: 'docFile',
onChange: handleChange,
onRemove: handleRemove
};
const normFile = (e) => {
if (Array.isArray(e)) {
return e;
}
const fileList = e?.fileList
if (fileList && e?.file?.status === 'done') {
return e?.fileList?.filter(item => item?.response?.success || item?.url)
}
return e && e.fileList;
};
const isImg = file => {
if (fileType !== 'image') return true
return ['image/png', 'image/jpeg'].indexOf(file.type) > -1;
}
const beforeUpload = file => {
if (!isImg(file)) {
message.error(`只能上传图片文件`);
}
return isImg(file) ? true : Upload.LIST_IGNORE;
}
return (
<div className={listType === 'text' ? style.upload_btn_box : ''}>
<Form.Item
name={name}
valuePropName="fileList"
getValueFromEvent={normFile}
>
<Upload
listType={ listType || 'text' }
{...options}
beforeUpload={beforeUpload}
>
<div className={style.upload_btn}>
<PlusOutlined />
<div style={{ marginTop: 5 }}>
<span>{title || '上传文件'}</span>
</div>
</div>
</Upload>
</Form.Item>
</div>
);
};
export default UploadForm;