在redux表单的6.0版本rc.3中添加了一个用于上传多个图像的字段

Adding a field for uploading multiple images in ver 6.0 rc.3 of redux-form

本文关键字：一个 用于 字段 图像 0版本 表单 redux rc 添加      更新时间：2023-09-26

我正在试验redux-form v6.0.0 rc.3，并试图添加一个用于上传多个图像的字段。

想法1：添加一个类型为"file"的字段

attachImages(images) {
        console.info('images received: ', images);
    }
<Field
                      name="pics"
                      component={renderInput}
                      placeholder="Pictures"
                      onDrop={this.attachImages}
                      type="file" />

想法2：使用第三方Dropzone组件：

onDrop(files, evt) {
        console.log('received files: ', files);
        evt.preventDefault();
    }
<Dropzone
                     onDrop={ this.dropFile }
                 >
                   <div>Try dropping some files here, or click to select files to upload.</div>
                 </Dropzone>

我已经尝试了这两个想法，但第一个根本无法触发onDrop函数，第二个想法似乎更有希望，然而，我不知道如何为6.0.0 rc.3版本添加API字段。有人知道吗？

经过多次努力，我通过稍微修改Dropzone组件的onDrop回调实现了我的第二个想法。修改包括使用动作类型为redux-form/CHANGE的reduForm包装组件的dispatch函数。

onDrop(files, evt) {
        console.log('received files: ', files);
        evt.preventDefault();
        this.props.dispatch({
            type: 'redux-form/CHANGE',
            field: 'images',
            value: files, // files is an array of File
        });
    }

然后在reducer中，我观察动作类型redux-form/CHANGE，并提取要上传的文件。这可能有点太麻烦了，但它可以与当前版本6 RC3 API一起使用。

相关文章：