CSS、JavaScript、Vue、HTML为中心的前端开

jsx代码片段：fieldProps 为发送给upload 的特性；

``` <ProFormUploadButton
                name="viewIcon"
                label="浏览器图标"
                width="md"
                max={1}
                fileList={fileList}
                fieldProps={{
                    name: 'multipartFile',
                    accept: ".png,.jpg,.jpeg",
                    listType: 'picture-card',
                    onPreview: ViewChromIcon,
                    method: "POST",
                    data: { imageType: 1 },
                    headers: {
                        'x-auth-token': sessionStorage.getItem('loginToken')
                    }
                }}
                action="/api/v1/factories/upload"
                beforeUpload={beforeUpload}
                onChange={handleChange}
                extra="强烈推荐规格：50*50px，图片大小不得超过4M"
            />
            <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={() => setPreviewOpen(false)}>
                <img alt="example" style={{ width: '100%' }} src={fileList[0]?.['thumbUrl']} />
            </Modal>

函数代码块

 const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [previewOpen, setPreviewOpen] = useState(false);
   const limitSize = (file) => {
        const isLt4M = file.size / 1024 / 1024 < 4;
        if (!isLt4M) {
            message.error('图片尺寸不得超过4M');
            return false
        } else {
            return true
        }
    }

    const beforeUpload = (file: RcFile) => {
        return limitSize(file);
    };
     const ViewChromIcon = (file) => {
        setPreviewOpen(true);
        setPreviewTitle(file['name'])
        return false
    }