最近在写一个OJ网站,里面要用到upload的地方比较多,然后需要对upload进行封装,其中还用到了form,由于遇到了几个比较隐蔽的问题,而耽误了几天,为了让广大猿媛们少走弯路,这里讲一下自己的封装过程。
这里提一个比较的需求,就是实现手动上传并且获得上传后的路径。
涉及解决的问题
-
将数据返回给父组件
-
重写上传操作,也就是写customRequest
-
重写删除操作, handleRemove
-
控制是否显示上传列表, showUploadList
-
用于form
- 首先定义存储数据和刷新界面的state和props
constructor(p) {
super(p);
this.state = {
uploadedFileList: [], // 已经上传的文件列表
// uploadedFilePaths: [] // 已经上传的文件路径
};
}
static propTypes = {
showUploadList: PropTypes.bool,
beforeUpload: PropTypes.func,
customUpload: PropTypes.func,
onRemove: PropTypes.func
}
static defaultProps = {
saveType: 'file', // 保存的类型,默认为file, 可选的值有 'file','base64','redis'
fileList: [], // 默认的上传的文件, 格式为 fileList: [{uid: '对应文件的uid', name: '文件名称', status: 'done', url: '文件url'}]
showUploadList: true, // 是否显示上传的文件列表
onChange: ()=> {}, // 文件值改变的时候的回调函数
// beforeUpload: null, // 文件上传之前的检验
// customUpload: null, // 手动进行上传文件
// onRemove: ()=> {}, // 成功删除的回调函数
}
- 写手动上传的函数
customUpload= (file) => {
request.post(`${prefix}/teacher/course/upload`)
.attach('files', file.file)
.field({from: 'customUpload'}).then(result=> {
const uploadedFileList = this.props.value;
const newFile = {uid: file.file.uid, name: file.file.name, url: result.body.data};
let fileList = [];
if (uploadedFileList) {
uploadedFileList.map((e) => {
return fileList.push(e);
});
}
fileList.push(newFile);
this.setState({
uploadedFileList: [...fileList]
});
// 父组件监听数据变化
const {onChange} = this.props;
onChange(fileList); // 父组件的onChange只会去更改value的值
});
}
- 写删除函数,然后将数据变化提交给父组件
handleRemove= (file) => {
const uploadedFileList = this.state.uploadedFileList.slice();
const index = uploadedFileList.indexOf(file);
const [bucket, objectName] = uploadedFileList[index].url.split('/');
request.delete(`${prefix}/teacher/course/remove`)
.query({
bucket,
objectName
})
.then(result => {
if (result.body.code !== 'SUCCESS') {
return;
}
uploadedFileList.splice(index, 1);
this.setState({
uploadedFileList
});
// 将数据返回给父组件处理
const {onChange} = this.props;
let fileList = [];
uploadedFileList.map((e) => {
return fileList.push(e);
});
onChange(fileList);
});
}
- 将上面的函数绑定到Upload组件中
<Upload
fileList={this.state.uploadedFileList}
beforeUpload={this.beforeUpload}
customRequest={this.customUpload}
onRemove={this.handleRemove}
// onChange={this.handleChange}
{...uploadProps}>
<Button><Icon type='upload'></Icon>上传文件</Button>
</Upload>
至此,只需要将这个组件export出去就完成了封装,比如,我们这个组件叫customUpload,则如下
export default CustomUpload;
上述过程有点看起来很简单,但是有几个注意点,如下:
-
upload
中customRequest
不能够使用async
关键字,如果需要向服务器发送请求,又想接收返回值做出相应操作, 有两个方式,一个是使用dispatch
,一个就是使用.then
的方法。如果使用了async
关键字,在组件销毁的时候会报一个reqs[uid].abort
的错误,需要注意! - 在form组件中,使用的是
getFieldDecorator
进行渲染组件的,这个时候它会往组件中注入value
这一个属性和onChange
这个函数用于存储值和监听值的改变,所以在封装的组件中,需要调用this.props.onChange
方法来对希望改变的值进行操作。
以上!希望对大家有所帮助。
注:上述表述如有错误,请各位不吝赐教!
网友评论