如何使用 axios 從 React-Native-Image-Picker 上傳圖像？

Question

我正在嘗試將圖像從我的應用程序上傳到 API，但服務器沒有響應，但另一個數據是文本已成功發送，有人可以幫我嗎？

圖像選擇器的響應

{"fileName": "rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "fileSize": 82214, "height": 800, "type": "image/jpeg", "uri": "content://com.talikasih.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "width": 379}

這是數據

const datas = new FormData();
datas.append('images', payload.image)

這是 axios

axios({
      method: 'POST',
      url: API_NO_PARAM_CONFIG.createCampaign,
      headers: {
        Authorization: `Bearer ${e}`,
      },
      data: {
        datas,
      },
    })

Answer 1

這是解決方案。 首先將所選圖像保存在 state 變量之一中。 例如，創建一個名為“selectedImage”的 state 變量，如下所示：

const [selectedImage, setSelectedImage] = useState(null);

現在，當您在 state 變量中設置 select 圖像時，如下所示：

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.uri) {
        setSelectedImage(response);
      }
    });

現在創建FormData如下：

  const datas = new FormData();

  datas.append('images', {
    name: selectedImage.fileName,
    type: selectedImage.type,
    uri:
      Platform.OS === 'android' ? selectedImage.uri : selectedImage.uri.replace('file://', ''),
  });

並傳遞如下：

axios({
  method: "POST",
  url: API_NO_PARAM_CONFIG.createCampaign,
  headers: {
    Authorization: `Bearer ${e}`,
    "Content-Type": "multipart/form-data", // add this
  },
  datas, //pass datas directly
});