Question

我正在使用React with Redux-Form，我正在尝试在文件输入中显示图像的预览。我设法预览了图像，但是图像只会预览我选择文件后是否更改了文件输入的焦点（而不是在选择文件后立即预览）。

这是我采取的方法：

<div className="form-group">
    <label htmlFor="exampleInputFile" style={{ width: '100%' }}>
        <img id="team-logo-img" className="img-responsive center-block" src="http://placehold.it/180" />
        {this.renderImagePreview()}
    </label>
    <input type="file" id="exampleInputFile" {...teamLogoField} value={null} onChange={this.readURL(this)} />
</div>

我的readURL功能：

readURL(input) {

    input = input.props.fields.teamLogoField.value;

    if (input && input[0]) {
        const reader = new FileReader();

        reader.onloadend = function (e) {
            jQuery('#team-logo-img')
            .attr('src', e.target.result);
        };

        reader.readAsDataURL(input[0]);
    }
}

有没有办法在用户选择文件后立即预览图像？或者如果有更好的方法来预测图像使用反应redux-forms我正在听！

=============================================== ========================= 编辑1：

我正在使用的方法基于： https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

在不使用反应时对我有用

Answer 1

好的，我找到了一个解决方案：我将readURL函数更新为：

updatePreview(event, teamLogoField) {
    const reader = new FileReader();

    reader.onload = (e) => {
        $('#team-logo-img').attr('src', e.target.result);
     };

    reader.readAsDataURL(event.target.files[0]);
    teamLogoField.onChange(event);
}

并在onChange句柄或输入上调用它，如下所示：

onChange={ (event) => {this.updatePreview(event , teamLogoField)} }

我相信这是以简单的方式预览图像中的图像，但正如我之前所说：如果有人有更好的方法，我正在听！

=============================================== ============================ 修改1

看起来你必须将redux-form字段对象传递给onChange Handler以调用redux-form自己的onChange，以便更新字段的新状态

=============================================== ============================ 修改2

我找到了更多的反应方法，在我的IMG元素中，y将src设置为我的组件状态中的变量，并且在我的updatePreview函数中，在onload块中我更新了变量的值，你完成了！

React，redux-form图像预览

1 个答案: