zent
Version:
一套前端设计语言和基于React的实现
68 lines (60 loc) • 1.27 kB
Markdown
order: 1
zh-CN:
title: 基础用法
tips: 单个文件不超过 2M
en-US:
title: Basics
tips: Single file no more than 2M
```jsx
import { Upload, Notify } from 'zent';
class Simple extends React.Component {
onUploadChange = files => {
console.log(files);
};
onUpload = (file, report) => {
return new Promise((resolve, reject) => {
let count = 0;
const update = () => {
if (count < 100) {
count += 10;
report(count);
setTimeout(update, 500);
} else {
// 随机成功或失败
const success = Math.random() > 0.5;
if (success) {
resolve();
} else {
reject();
}
}
};
setTimeout(update, 500);
});
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 个文件`);
} else if (type === 'overMaxSize') {
Notify.error(`文件大小不能超过 ${data.formattedMaxSize}`);
}
};
render() {
return (
<Upload
multiple
className="zent-upload-demo-pic"
maxSize={2 * 1024 * 1024}
maxAmount={3}
tips="{i18n.tips}"
onChange={this.onUploadChange}
onUpload={this.onUpload}
onError={this.onUploadError}
/>
);
}
}
ReactDOM.render(<Simple />, mountNode);
```