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);
   });

我的问题是，我能以什么方式从响应中添加此图像网址数据，并在将其提交到我的服务器之前将其传递给我的redux表单？

如果不是一种有效的方式，也会非常感谢建议。

Answer 1

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

此外，如果您要保存图片网址的唯一目的是发送另一个请求将网址和表单数据发送到您的服务器和数据库，实际上没有必要将其保存在redux存储中。您可以返回它，以便您可以在下一个保证链中使用它，如下面的代码所示。

但是，如果您仍然坚持将其保存到商店也许是出于其他原因，我会做的是发送一个动作来保存我的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))

}

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

1 个答案: