import React, { useEffect, useState } from 'react'
|
import { Upload, Form } from '@arco-design/web-react';
|
import {
|
IconAttachment,
|
} from '@arco-design/web-react/icon';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const FormItem = Form.Item;
|
|
/**
|
* params *, //upload组件参数
|
* field *, // form的标识
|
* handleChangeFile, // 文件上传成功之后的回调
|
* label *, // form的label名
|
* editData *, // 编辑回显数据
|
* handleDelFile *,//删除文件接口
|
*/
|
|
export default function ArcoUpload(props) {
|
const [myFileList, setMyFileList] = useState([])
|
useEffect(() => {
|
if (props.editData) {
|
console.log(props.editData[props.field]);
|
setMyFileList(props.editData[props.field])
|
}
|
}, [props.editData])
|
|
return (
|
<FormItem
|
label={props.label}
|
field={props.field}
|
triggerPropName='fileList'
|
>
|
<Upload
|
drag
|
multiple
|
accept='.png,.jpg,.pdf'
|
onDrop={(e) => {
|
}}
|
tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
|
showUploadList={{
|
fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
|
}}
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
onChange={(fileList, file) => {
|
const { status, response } = file
|
//因为字节upLoad组件有bug，不能区分添加文件还是删除文件，所以用这种办法来判断是不是删除
|
const isDel = myFileList && myFileList.length > fileList.length
|
//上传失败
|
if (status === 'error' && !isDel) {
|
$$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
|
}
|
//上传成功
|
if (status === 'done' && !isDel) {
|
if (response.code === 0 || response.code === '0') {
|
// 返回附件成功上传的回调
|
$$.infoSuccess({ content: response.msg });
|
if (props.handleChangeFile) {
|
props.handleChangeFile(response);
|
}
|
}
|
}
|
//删除文件
|
if (isDel && props.handleDelFile) {
|
props.handleDelFile(response.data[0].id)
|
}
|
setMyFileList(fileList)
|
}}
|
{...props.params}//自定义
|
/>
|
</FormItem>
|
)
|
}
|
