主页 / coding / 问题 / 78801152
Accepted
Berkan Kadioglu
Asked: 2024-07-27 18:41:47 +0800 CST

使用包含图像的 FormData 进行 React Native HTTP 请求

  • 772

我的目标是将照片从本地设备发送到服务器。

我曾经import { launchImageLibrary } from "react-native-image-picker";选择过一种photo叫做

const resp = await fetch(photo.uri);
const blob = resp.blob();
formData.append('regPhoto', blob);
registerUser(formData);

将其作为 blob 附加到表单数据中。我检查了 await fetch 调用是否返回了有意义的数据，并返回了 200。然后使用 XMLHttpRequest API 发送了此 formData：

function registerUser(formData: FormData) {
  cl("registerUser");
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url + "registerUser");
    xhr.onreadystatechange = () => {
      const resObj = onReadyStateChange(xhr);
      if (resObj) {
        resolve(resObj);
      }
    };

    xhr.send(formData);
  });
}

发生了两件事，服务器接收没有图像的请求并在没有图像的情况下处理它。这在某种程度上是成功的。同时，客户端（Android 模拟器）有一个 JSON 响应，内容为：无法识别的表单数据部分。我不确定这实际上来自哪里。

有人知道这里发生了什么吗？我只是想通过 formData 将图像上传到我的服务器。

我尝试了其他方法将照片附加到 formData 但出现同样的错误。

javascript

1 个回答

  1. Best Answer

    首先，确保您已准备好要上传的图像文件。通常，您可以使用以下库从用户的设备获取此图像react-native-image-picker。

    import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as ImagePicker from 'react-native-image-picker';

const UploadImage = () => {
  const [imageUri, setImageUri] = useState(null);

  const selectImage = () => {
    ImagePicker.launchImageLibrary({ mediaType: 'photo' }, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        setImageUri(response.assets[0].uri);
      }
    });
  };

  const uploadImage = async () => {
    const formData = new FormData();
    formData.append('photo', {
      uri: imageUri,
      name: 'photo.jpg',
      type: 'image/jpeg'
    });

    try {
      const response = await fetch('https://your-api-endpoint.com/upload', {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error('Error uploading image: ', error);
    }
  };

  return (
    <View>
      <Button title="Select Image" onPress={selectImage} />
      {imageUri && (
        <View>
          <Image source={{ uri: imageUri }} style={{ width: 100, height: 100 }} />
          <Button title="Upload Image" onPress={uploadImage} />
        </View>
      )}
    </View>
  );
};

export default UploadImage;

    npm install axios或者yarn add axios

    import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import axios from 'axios';

const UploadImage = () => {
  const [imageUri, setImageUri] = useState(null);

  const selectImage = () => {
    ImagePicker.launchImageLibrary({ mediaType: 'photo' }, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        setImageUri(response.assets[0].uri);
      }
    });
  };

  const uploadImage = async () => {
    const formData = new FormData();
    formData.append('photo', {
      uri: imageUri,
      name: 'photo.jpg',
      type: 'image/jpeg'
    });

    try {
      const response = await axios.post('https://your-api-endpoint.com/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log(response.data);
    } catch (error) {
      console.error('Error uploading image: ', error);
    }
  };

  return (
    <View>
      <Button title="Select Image" onPress={selectImage} />
      {imageUri && (
        <View>
          <Image source={{ uri: imageUri }} style={{ width: 100, height: 100 }} />
          <Button title="Upload Image" onPress={uploadImage} />
        </View>
      )}
    </View>
  );
};

export default UploadImage;
    • 0

相关问题