首页 > Web开发 > 详细

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

时间:2019-12-25 09:46:32      阅读:798      评论:0      收藏:0      [点我收藏+]
  最近在做一个后台推送的需求,其中有一处功能是,可以从本地选择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这个参数。
 
 

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

原文:https://www.cnblogs.com/zzalmo/p/12094763.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!