Redux表单：如何在提交之前将图像URL添加到Redux表单中？

Question

我已经设置了一个带有文件上传的表单，在这里我通过单独的请求将图像上传到Cloudinary。我想要做的是从Cloudinary的响应对象中挑选一个图像url，将它传递给我的redux表单，并将其与其他表单值一起提交给我的服务器和数据库。到目前为止，我的要求是这样的

onChange(event) { 
    let formData = new FormData(); 
    formData.append('file', event.target.files[0]); 
    formData.append('upload_preset', UPLOAD_PRESET); 

    axios({ 
    url: `${COUDINARY_ROOT_URL}`, 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    data: formData 
    }).then((res) => { 
    console.log(res); 

    }).catch((err) => { 
    console.err(err); 
    }); 

我的问题是，用什么方式我可以从响应添加此图像的URL数据，并将其提交给我的服务器之前将它传递给我的终极版的形式？

如果这不是一种有效的方式，那么对于建议也会非常感激。

Answer 1

我相信，如果您通过表单组件（例如输入标签，复选框等）传递数据，则redux表单只能存储状态。但在这种情况下，您希望将数据从变量存储到商店。我不知道通过redux形式的任何方式，所以我建议您使用redux。

此外，如果您要保存图像url，仅用于发送另一个将url和表单数据发送到服务器和数据库的请求的唯一目的，实际上并不需要将它保存在redux存储中。您可以将其退回，以便您可以在下一个承诺链中使用它，如下面的代码所示。

但是，如果您仍然坚持将其保存到商店，也许出于其他原因，我会做的是派遣一个操作，将该url保存在我的redux商店中。

getImageUrl(formData) { 
    return axios({ 
    url: `${COUDINARY_ROOT_URL}`, 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    data: formData 
    }); 
} 

sendDataToServer(url, formData) { 
    // ... send url and formData to my server 
} 

onChange(event) { 
let formData = new FormData(); 
formData.append('file', event.target.files[0]); 
formData.append('upload_preset', UPLOAD_PRESET); 
getImageUrl(formData) 
    .then(res => { 
    // assuming res.url contains the url and 
    // saveUrl is a method wrapped in dispatch from 
    // mapDispatchToProps 
    this.props.saveUrl(res.url); 

    // return res.url so that it can be used in the 
    // next then chain 
    return res.url; 
    }) 
    .then(url => { 
    // we can get the url from previous promise chain 
    sendDataToServer(url, formData); 

    // ... rest of code 

    }) 
    .catch(err => console.err(err)) 

}