最近在写一个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方法来对希望改变的值进行操作。
以上！希望对大家有所帮助。
注：上述表述如有错误，请各位不吝赐教！
