mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
24a86df257
* style: fix Upload picture-card button style close https://github.com/ant-design/ant-design/issues/26317 close #23339 * style: tweak Upload list animation close #22386 * fix snapshot change * docs: update Upload demos * add test case * update form demo * fix test case
2.6 KiB
2.6 KiB
order | title | ||||
---|---|---|---|---|---|
11 |
|
zh-CN
使用阿里云 OSS 上传示例.
en-US
Use Aliyun OSS upload example.
import { Form, Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
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={<UploadOutlined />}>Click to Upload</Button>
</Upload>
);
}
}
const FormPage = () => (
<Form labelCol={{ span: 4 }}>
<Form.Item label="Photos" name="photos">
<AliyunOSSUpload />
</Form.Item>
</Form>
);
ReactDOM.render(<FormPage />, mountNode);