異步驗證後的Redux表格文件上傳

Question

我有一個FileUpload組件通過一個redux表單字段連接。當在輸入字段中選擇文件時，它將所選文件的input.onChange和input.onBlur作爲base64字符串調用。

我使用asyncValidator redux-form選項來驗證圖像的尺寸，並且我希望在異步驗證完成後將文件上傳到我的服務器。

似乎沒有任何形式的afterAsyncValidation掛鉤記錄。什麼是最好的方式來完成這種減少形式？

Answer 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)