reactjs - 如何使用 React.js 和 axios 将 POST 响应发送到另一个函数？

Question

我的fileUploadHandler功能如下发布文件。帖子的响应如下所示：{ filename: '123sdfg.xlsx' }

fileUploadHandler = (fileData) => {
    const formData1 = new FormData();
    formData1.append("file", fileData)
    postFileUpload(formData1).then((result) => console.log("response", result.data));    
  };

我尝试了下面的代码，但抛出了 storeFile 未定义的错误。

fileUploadHandler = (fileData) => {
    const formData1 = new FormData();
    formData1.append("file", fileData)
    postFileUpload(formData1).then((result) => storeFile(result.data)); 
    storeFile;
  };

后调用函数如下所示：

export const postFileUpload = (values) => {
  return new Promise((resolve, reject) => {
    axios    
    .post('<URL>', values)
    .then((result) => {
      if (result) {
        resolve(result);
      }
    })
    .catch((error) => {
      reject({ message: "Error:" + error.message });
    });
  });
}

我希望处理程序不仅要发布文件，还要获取响应，并将响应发送到另一个函数。如何将来自 fileUploadHandler 的响应返回到另一个函数，如 formSubmit（示例）。

标签： reactjsaxios

Answer 1

我想这可能是你正在寻找的。如果要使用 axios 发送文件，您可能还需要添加指定内容类型的标头。

const fileUploadHandler = fileData => {
  const formData1 = new FormData()
  formData1.append("file", fileData)

  axios
    .post("<URL>", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then(result => {
      if (result) {
        postFileUpload(result)
      }
    })
    .catch(error => {
      // Handle any errors if the upload fails
      console.log(error)
    })
}

const postFileUpload = result => {
  // This will be called after the file is uploaded.
  console.log(result)
}

编辑：

const postFileUpload = formData => {
  return axios.post("<URL>", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  })
}

const fileUploadHandler = fileData => {
  const formData1 = new FormData()
  formData1.append("file", fileData)

  postFileUpload(formData1)
    .then(result => {
      console.log("response", result.data)
    })
    .catch(error => {
      // Handle any errors if the upload fails
      console.log(error)
    })
}