异步验证后的 Redux-Form 文件上传

Posted 2023-02-22

【中文标题】异步验证后的 Redux-Form 文件上传

【英文标题】：Redux-Form file upload after async validation

【发布时间】：2017-05-02 14:20:21

【问题描述】：

我有一个通过 redux-form 字段连接的 FileUpload 组件。当在输入字段中选择文件时，它会调用 input.onChange 和 input.onBlur 并将所选文件作为 base64 字符串。

我正在使用 asyncValidator redux-form 选项来验证图像的尺寸，并且我希望在异步验证完成后将文件上传到我的服务器。

似乎没有记录任何类型的 afterAsyncValidation 挂钩。以 redux 形式完成此任务的最佳方法是什么？

【参考方案1】：

redux-form 的设计理念是您的数据将在提交时保存到服务器。

但是，没有什么可以阻止您在异步验证之后放置自己的 .then() 子句来执行此操作。像这样？

// async function you already have that is looking at your
// picture field and rejecting the promise with errors
import validateDimensions from './validateDimensions'

// async function to upload the image
import upload from './uploadImage'

const MyForm = reduxForm(
  form: 'myForm',
  asyncValidate: values =>
    validateDimensions()
      .then(() => 
        // we know validation passed
        upload(values.prettyPicture)
        // ^ not "return upload(values.prettyPicture)" to let this async
        // validation promise resolve and do upload asynchronously
        // after it has resolved
      )
  ,
  asyncBlurFields: [ 'prettyPicture' ]
)(MyForm)

【讨论】：

假设我在表单中添加了另一个异步验证。这不会再次运行所有异步验证，从而导致文件再次重新上传吗？

是的，这就是为什么它不是asyncValidate 的预期用途。

@ErikR。有没有办法让它以iframe为目标执行html提交，以便我们可以支持旧浏览器？

@Andy 您可以随心所欲地进行老式的表单提交。它有点回避了 redux-form 的好处，但是....

@ErikR。我想出了一个半hacky的解决方案，我的onSubmit回调首先调用redux-form注入的handleSubmit进行验证，然后再次调用form.submit()并设置一个标志以绕过handleSubmit，这样preventDefault()就不会'不要被调用并且老式的表单提交会通过。 （以及使用目标iframe 以便不会重新加载页面）。这都是为了支持文件上传