mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
docs: improve upload demos (#35104)
* docs: improve upload demos * Update drag-sorting.md
This commit is contained in:
parent
f180ec6df5
commit
1349b99122
@ -84,12 +84,5 @@ class Avatar extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => <Avatar />;
|
export default Avatar;
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
.avatar-uploader > .ant-upload {
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
@ -135,7 +135,7 @@ const DragSortingUpload = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default () => <DragSortingUpload />;
|
export default DragSortingUpload;
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
@ -35,7 +35,7 @@ function getBase64(file) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
class PicturesWall extends React.Component {
|
class App extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
previewVisible: false,
|
previewVisible: false,
|
||||||
previewImage: '',
|
previewImage: '',
|
||||||
@ -139,5 +139,5 @@ class PicturesWall extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => <PicturesWall />;
|
export default App;
|
||||||
```
|
```
|
||||||
|
@ -25,7 +25,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom
|
|||||||
import { Upload, Button } from 'antd';
|
import { Upload, Button } from 'antd';
|
||||||
import { UploadOutlined } from '@ant-design/icons';
|
import { UploadOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
class MyUpload extends React.Component {
|
class App extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
fileList: [
|
fileList: [
|
||||||
{
|
{
|
||||||
@ -70,5 +70,5 @@ class MyUpload extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => <MyUpload />;
|
export default App;
|
||||||
```
|
```
|
||||||
|
@ -26,7 +26,7 @@ function getBase64(file) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
class PicturesWall extends React.Component {
|
class App extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
previewVisible: false,
|
previewVisible: false,
|
||||||
previewImage: '',
|
previewImage: '',
|
||||||
@ -119,5 +119,5 @@ class PicturesWall extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => <PicturesWall />;
|
export default App;
|
||||||
```
|
```
|
||||||
|
@ -18,7 +18,7 @@ import React, { useState } from 'react';
|
|||||||
import { Upload, Button, message } from 'antd';
|
import { Upload, Button, message } from 'antd';
|
||||||
import { UploadOutlined } from '@ant-design/icons';
|
import { UploadOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
const Uploader = () => {
|
const App = () => {
|
||||||
const props = {
|
const props = {
|
||||||
beforeUpload: file => {
|
beforeUpload: file => {
|
||||||
const isPNG = file.type === 'image/png';
|
const isPNG = file.type === 'image/png';
|
||||||
@ -38,5 +38,5 @@ const Uploader = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default () => <Uploader />;
|
export default App;
|
||||||
```
|
```
|
||||||
|
@ -112,7 +112,7 @@ class AliyunOSSUpload extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const FormPage = () => (
|
const App = () => (
|
||||||
<Form labelCol={{ span: 4 }}>
|
<Form labelCol={{ span: 4 }}>
|
||||||
<Form.Item label="Photos" name="photos">
|
<Form.Item label="Photos" name="photos">
|
||||||
<AliyunOSSUpload />
|
<AliyunOSSUpload />
|
||||||
@ -120,5 +120,5 @@ const FormPage = () => (
|
|||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default () => <FormPage />;
|
export default App;
|
||||||
```
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user