react 封装simple-uploader.js显示上传进度以及是否上传成功
时间: 2023-10-05 18:14:52 浏览: 62
可以使用simple-uploader.js提供的回调函数来实现上传进度和上传成功的显示。
首先,在你的React组件中引入simple-uploader.js和相关样式文件。然后,在组件中定义一个state,用于保存上传进度和上传状态:
```javascript
import SimpleUploader from 'simple-uploader.js';
import 'simple-uploader.js/src/styles.css';
class UploadComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: 0,
success: false
};
}
}
```
接着,在组件的render方法中,渲染一个上传按钮和一个进度条:
```javascript
render() {
return (
<div>
<button onClick={this.handleUpload}>Upload</button>
<div className="progress-bar" style={{ width: `${this.state.progress}%` }} />
</div>
);
}
```
在按钮的点击事件中,创建一个SimpleUploader实例,并添加上传成功和上传进度的回调函数。在上传成功的回调函数中,设置state中的success为true。在上传进度的回调函数中,设置state中的progress为上传进度的百分比:
```javascript
handleUpload = () => {
const uploader = new SimpleUploader({
target: '/upload',
success: () => {
this.setState({ success: true });
},
progress: (progress) => {
this.setState({ progress: Math.round(progress * 100) });
}
});
uploader.uploadSelectedFiles();
};
```
最后,在组件的render方法中,根据state中的success来显示上传结果:
```javascript
render() {
const { success } = this.state;
return (
<div>
<button onClick={this.handleUpload}>Upload</button>
<div className="progress-bar" style={{ width: `${this.state.progress}%` }} />
{success && <div>Upload successful!</div>}
</div>
);
}
```
完整的组件代码如下:
```javascript
import React from 'react';
import SimpleUploader from 'simple-uploader.js';
import 'simple-uploader.js/src/styles.css';
class UploadComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: 0,
success: false
};
}
handleUpload = () => {
const uploader = new SimpleUploader({
target: '/upload',
success: () => {
this.setState({ success: true });
},
progress: (progress) => {
this.setState({ progress: Math.round(progress * 100) });
}
});
uploader.uploadSelectedFiles();
};
render() {
const { success } = this.state;
return (
<div>
<button onClick={this.handleUpload}>Upload</button>
<div className="progress-bar" style={{ width: `${this.state.progress}%` }} />
{success && <div>Upload successful!</div>}
</div>
);
}
}
export default UploadComponent;
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)