封装upload(ant design)的辛酸史

2018-12-15 本文已影响0人这可还行

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

封装upload(ant design)的辛酸史

猜你喜欢

热点阅读