在 react-native 中的 axios 請求中傳遞圖像

Question

我正在嘗試與此請求一起傳遞圖像，發送其他參數，但不發送圖像。 有什么辦法會更好。 appApi是我導入的 axios 實例。

const update = dispatch => async ({ name, email, phone, photo, Age, Blood, Gender, Height, Weight, id }) => {
      //make api request to update with that info

      // const picture = new FormData()
      // picture.append("picture", {
      //   type: 'image/jpg',
      //   uri: photo,
      //   name: 'profilepic.jpg'
      // });

      // const picture = {
      //   type: 'image/jpg',
      //   uri: photo,
      //   name: 'profilepic.jpg'
      // }
      // console.log(picture)
      const picture = {
        type: 'image/jpg',
        uri: photo,
        name: 'profilepic.jpg'
      }


      const response = await appApi.put(`/userregister/${id}`, { name, email, phone, picture, Age, Blood, Gender, Height, Weight })
      if (response) {
        console.log(response.data)
        navigate("AccountScrn");

      } else {
        dispatch({
          type: "ADD_ERROR",
          payload: 'Unable to update profile, please try again later'
        })
      }
    };

Answer 1

你需要像這樣制作一個FormData ：

const update = dispatch => async ({ name, email, phone, photo, Age, Blood, Gender, Height, Weight, id }) => {
      //make api request to update with that info
      let data = { name, email, phone, photo, Age, Blood, Gender, Height, Weight };
       //notice that your photo must be a file 
      let fd = new FormData();
      Object.keys(data).map(item => {
         fd.append(item , data[item]);
      });


      const response = await appApi.put(`/userregister/${id}`,fd )
      if (response) {
        console.log(response.data)
        navigate("AccountScrn");

      } else {
        dispatch({
          type: "ADD_ERROR",
          payload: 'Unable to update profile, please try again later'
        })
      }
    };

Answer 2

使用我已經完成的 fetch 方法，您可以輕松更改為 axios

fetch("/url", {
      method: "POST",
      body: JSON.stringify({ serial_no: "xyz" }),
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.blob())
      .then(file => {
        var outside = URL.createObjectURL(file);
        console.log(outside)
      });

您可以使用img 標簽中的圖像，也可以下載圖像