怎么查看antd的base64编码
时间: 2023-11-14 16:37:59 浏览: 57
要查看Antd的base64编码,可以使用浏览器的开发者工具。在Chrome浏览器中,可以按F12打开开发者工具,然后选择“Elements”选项卡,在页面中找到要查看的Antd组件,右键点击该组件,选择“Inspect”选项,在右侧的“Styles”选项卡中找到该组件的样式代码,可以看到其中有一些以“data:image/svg+xml;base64,”开头的代码,这就是Antd使用的base64编码。
相关问题
怎么将antd的icon转为base64编码
你可以使用在线工具将Antd的Icon转换为Base64编码。以下是一个示例:
1. 打开 https://www.base64encode.org/ 或者其他的 Base64 编码工具网站。
2. 在 Antd 的官网上选择一个 Icon,例如 StarOutlined。
3. 在 Base64 编码工具网站上,将以下代码复制到“文本”框中:
```html
<i class="anticon anticon-star-outlined"></i>
```
4. 点击“编码”按钮,等待工具将该代码转换为 Base64 编码。
5. 将生成的 Base64 编码复制到你的项目中,例如:
```css
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCI+PGcgZmlsbD0iI0ZGRiIgY2xhc3M9ImFudGljbGVjb2xvciI+PHBhdGggZD0iTTMwLjM4NzYgMTMuNzY4NmMxLjcyMjggMCAzLjA0OTkgMS42MzUyIDMuMDQ5OSAzLjA0OTloLTMuNTM1MWMxLjcyMjggMCAzLjA0OTktMS42MzUyIDMuMDQ5OS0zLjA0OTlDMzkuNzA4NiAxNy4zNzYgMzkuNzA4NiAxNy4zNzYgMzAuMzg3NiAxMy43Njg2eiIvPjwvZz48L3N2Zz4=");
```
6. 现在,StarOutlined 图标已经以 Base64 编码的形式嵌入到你的项目中了。
antdesignpro 获取UploadFile文件base64编码
Ant Design Pro 中的 Upload 组件是基于 Ant Design 中的 Upload 组件进行二次封装的,可以通过在 Upload 组件的 onChange 方法中获取上传文件的 base64 编码。
例如:
```jsx
import { Upload } from 'antd';
function handleUploadChange(info) {
if (info.file.status === 'done') {
// 上传成功后获取 base64 编码
const reader = new FileReader();
reader.readAsDataURL(info.file.originFileObj);
reader.onload = () => {
const base64 = reader.result.split(',')[1];
console.log(base64);
};
}
}
function UploadComponent() {
return (
<Upload
onChange={handleUploadChange}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
);
}
```
在 `handleUploadChange` 方法中,判断上传文件的状态是否为 `done`,如果上传成功,就可以通过 `FileReader` 对象将文件转换成 base64 编码,并在 `onload` 方法中获取到 base64 编码。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)