Docs: upload with aliyun oss (#19054)

* docs: upload with aliyun oss

* add before upload relate data

* test: lint fail

* test: update Snapshot

* docs: review change

* test: lint fail

* handle oss policy expired

* fix: lint fail

* optimize docs

* test: lint fail

* test: upload snapshot

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -1376,3 +1376,47 @@ exports[`renders ./components/upload/demo/upload-manually.md correctly 1`] = `
   </button>
 </div>
 `;
+
+exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        for="photos"
+        title="Photos"
+      >
+        Photos
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control"
+      >
+        <span
+          class="ant-form-item-children"
+        >
+          <span
+            class=""
+          >
+            <div
+              class="ant-upload ant-upload-select ant-upload-select-text"
+            />
+            <div
+              class="ant-upload-list ant-upload-list-text"
+            />
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</form>
+`;

components/upload/demo/upload-with-aliyun-oss.md

@@ -0,0 +1,138 @@
+---
+order: 11
+title:
+  zh-CN: 阿里云 OSS
+  en-US: Aliyun OSS
+---
+
+## zh-CN
+
+使用阿里云 OSS 上传示例.
+
+## en-US
+
+Use Aliyun OSS upload example.
+
+```jsx
+import { Form, Upload, message, Button, Icon } from 'antd';
+
+class AliyunOSSUpload extends React.Component {
+  state = {
+    OSSData: {},
+  };
+
+  async componentDidMount() {
+    await this.init();
+  }
+
+  init = async () => {
+    try {
+      const OSSData = await this.mockGetOSSData();
+
+      this.setState({
+        OSSData,
+      });
+    } catch (error) {
+      message.error(error);
+    }
+  };
+
+  // Mock get OSS api
+  // https://help.aliyun.com/document_detail/31988.html
+  mockGetOSSData = () => {
+    return {
+      dir: 'user-dir/',
+      expire: '1577811661',
+      host: '//www.mocky.io/v2/5cc8019d300000980a055e76',
+      accessId: 'c2hhb2RhaG9uZw==',
+      policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',
+      signature: 'ZGFob25nc2hhbw==',
+    };
+  };
+
+  onChange = ({ fileList }) => {
+    const { onChange } = this.props;
+    console.log('Aliyun OSS:', fileList);
+    if (onChange) {
+      onChange([...fileList]);
+    }
+  };
+
+  onRemove = file => {
+    const { value, onChange } = this.props;
+
+    const files = value.filter(v => v.url !== file.url);
+
+    if (onChange) {
+      onChange(files);
+    }
+  };
+
+  transformFile = file => {
+    const { OSSData } = this.state;
+
+    const suffix = file.name.slice(file.name.lastIndexOf('.'));
+    const filename = Date.now() + suffix;
+    file.url = OSSData.dir + filename;
+
+    return file;
+  };
+
+  getExtraData = file => {
+    const { OSSData } = this.state;
+
+    return {
+      key: file.url,
+      OSSAccessKeyId: OSSData.accessId,
+      policy: OSSData.policy,
+      Signature: OSSData.signature,
+    };
+  };
+
+  beforeUpload = async () => {
+    const { OSSData } = this.state;
+    const expire = OSSData.expire * 1000;
+
+    if (expire < Date.now()) {
+      await this.init();
+    }
+    return true;
+  };
+
+  render() {
+    const { value } = this.props;
+    const props = {
+      name: 'file',
+      fileList: value,
+      action: this.state.OSSData.host,
+      onChange: this.onChange,
+      onRemove: this.onRemove,
+      transformFile: this.transformFile,
+      data: this.getExtraData,
+      beforeUpload: this.beforeUpload,
+    };
+    return (
+      <Upload {...props}>
+        <Button>
+          <Icon type="upload" /> Click to Upload
+        </Button>
+      </Upload>
+    );
+  }
+}
+
+class FormPage extends React.Component {
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit} labelCol={{ span: 4 }}>
+        <Form.Item label="Photos">{getFieldDecorator('photos')(<AliyunOSSUpload />)}</Form.Item>
+      </Form>
+    );
+  }
+}
+
+const WrappedFormPage = Form.create()(FormPage);
+
+ReactDOM.render(<WrappedFormPage />, mountNode);
+```