美文网首页
封装upload(ant design)的辛酸史

封装upload(ant design)的辛酸史

作者: 这可还行 | 来源:发表于2018-12-15 14:41 被阅读0次

    最近在写一个OJ网站,里面要用到upload的地方比较多,然后需要对upload进行封装,其中还用到了form,由于遇到了几个比较隐蔽的问题,而耽误了几天,为了让广大猿媛们少走弯路,这里讲一下自己的封装过程。

    这里提一个比较的需求,就是实现手动上传并且获得上传后的路径。

    涉及解决的问题

    • 将数据返回给父组件

    • 重写上传操作,也就是写customRequest

    • 重写删除操作, handleRemove

    • 控制是否显示上传列表, showUploadList

    • 用于form

    1. 首先定义存储数据和刷新界面的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: ()=> {}, // 成功删除的回调函数
      }
    
    
    1. 写手动上传的函数
    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的值
          });
      }
    
    1. 写删除函数,然后将数据变化提交给父组件
    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);
          });
    }
    
    1. 将上面的函数绑定到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;
    

    上述过程有点看起来很简单,但是有几个注意点,如下:

    1. uploadcustomRequest不能够使用async关键字,如果需要向服务器发送请求,又想接收返回值做出相应操作, 有两个方式,一个是使用dispatch,一个就是使用.then的方法。如果使用了async关键字,在组件销毁的时候会报一个reqs[uid].abort的错误,需要注意!
    2. 在form组件中,使用的是getFieldDecorator进行渲染组件的,这个时候它会往组件中注入value这一个属性和onChange这个函数用于存储值和监听值的改变,所以在封装的组件中,需要调用this.props.onChange方法来对希望改变的值进行操作。
      以上!希望对大家有所帮助。
      注:上述表述如有错误,请各位不吝赐教!

    相关文章

      网友评论

          本文标题:封装upload(ant design)的辛酸史

          本文链接:https://www.haomeiwen.com/subject/nzuohqtx.html