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這個參數。