如何使用redux-form创建包含缩略图的图像上载字段

Question

我需要一个redux-form渲染字段，我可以使用预览缩略图上传图像并获得base-64值。

表格

<form className="AddProductForm" onSubmit={handleSubmit(this.addProduct.bind(this))}>
    <div className="form-group clearfix">
        <img className="addProductImg pull-left" src="" height="200" alt="Image preview..." />
        <input className="pull-right addProductImgBtn" type="file" onChange={previewFile} />
    </div>
    <div className="form-group">
        <Field name="name" component={this.renderField} type="text" placeholder="Product name" />
    </div>
    <Button onClick={close}>Cancel</Button>
    <button className='btn btn-primary addProductSave' type="submit" value="CONFIRM">Save</button>
</form>

文件上传

function previewFile() {
    var preview = document.querySelector('.addProductImg');
    var file = document.querySelector('input[type=file]').files[0];
    var reader = new FileReader();
    reader.onloadend = function () {
        preview.src = reader.result;
        let upImage = preview.src; 
        this.imageUrl = preview.src; // Base-64 value
    }
    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
    }
}

我可以在这里获得base-64值，但是我无法将此值添加到现有字段集中。

提交功能

addProduct = (values) => {
    console.log("Field values", values);
    console.log("image base64 value", this.imageUrl);
}

这里面addProduct函数我希望用base64编码获取图像值。