Ant Design Upload 组件之阻止文件默认上传

　　最近在做一个后台推送的需求，其中有一处功能是，可以从本地选择txt文件上传，这个txt包含每个被推送客户的uid。其实这个txt文件的意义只是对操作者来说比较方便，因为这个txt文件可以在另一个页面通过导出的方式得到，导出后可以直接使用。所以这个txt文件没有必要做到真正的上传，只是执行一个“上传”的伪动作，让我们可以拿到这个txt文件，而不是传给后台。

　　首先，这个上传的部分我们放在了Ant Design的form表单里，整个结构是由 Form.Item进行包裹的，上传的逻辑集中在了Upload这个组件里。

<Form.Item label="推送人群" extra="">
    {getFieldDecorator('personTxt', {
        rules: [{ required: true, message: '请选择推送人群文件' }],
        valuePropName: 'fileList',
        getValueFromEvent: this.normFile
    })(
        <Upload
            action="//upload.58cdn.com.cn/json?rand=0.1298"      //必填，上传的地址
            name="personfile"     //自行指定
            listType="file"     //指定上传的是文件
            accept=".txt"       //指定可上传的文件类型
            beforeUpload={this.beforeUpload}>
            <Button>
                <Icon type="upload" /> 选择txt文件
            </Button>
        </Upload>
    )}
</Form.Item>

　　下面我们来重点说一下beforeUpload这个参数：

　　它可以阻止默认的上传事件，Upload组件中提供了一个上传前的钩子函数beforeUpload,当这个钩子函数返回false的时候，默认上传行为就会被阻止。那么我们可以把代码写成这样：

beforeUpload = file => {
        let reader = new FileReader();
        reader.readAsText(file);         //读取上传文件的内容
        reader.onload = e => {
            let uids = e.target.result.split('\r\n');      //把读取到的txt文件中的uid以换行符进行分割
            return false;                //阻止上传
        };
    };

　　如果想要经过处理后继续上传，并不阻止默认上传行为，可以使用customRequest这个参数。

来源：oschina

链接：https://my.oschina.net/u/4415401/blog/3324639

标签

Ant Design