将文件从 react-native (expo) 项目上传到 php 服务器 (laravel)

Upload a file from react-native (expo) project to a php server (laravel)

我已经为这个问题寻找了一个星期的解决方案,尝试了很多东西对我没有用,我正在开发一个基于 expo 的 react-native 项目,我是什么尝试做的是使用 Imagepicker 上传图像,我尝试使用 axios 提交它并获取,我能够发送文本数据,如(用户名,电子邮件......)但不能将文件发送到服务器,它没有'完全不认识它,它给我的只是 [object object],如果有人成功地用 php 做到了,请分享你的代码,我确实用 html 形式尝试了后端并且文件上传没有问题。

解决方案

let picker = await ImagePicker.launchImageLibraryAsync({ base64: true });

const picker = selectedImage.base64;

这将 return 一个 base64 编码的图像数据,您所要做的就是将它作为文本字段发送到 php 服务器,对其进行解码并将其放入这样的文件中:

file_put_contents("example.jpg", base64_decode($_POST['image']));

是的,它正在工作

反应本机

// 保存选取图像的状态变量

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

// 使用图像选择器选择图片

let openImage = async () => {

    let permission = await ImagePicker.requestCameraRollPermissionsAsync();

    if (permission.granted == false) {
      return;
    }

    let picker = await ImagePicker.launchImageLibraryAsync();

    setSelectedImage(picker);
  }

//上传图片到服务器

    const uploadimage = async () => {
        const payload = new FormData();
        payload.append('image', {
          uri: selectedImage.uri,
          type: selectedImage.type,
          name: selectedImage.fileName
        })
    
        const config = {
          body: payload,
          method: 'POST',
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
    
        let response = await fetch('http://192.168.1.6/php_upload/upload.php', config);
        console.log(response);
      }

// PHP 后端

$target_file = "uploads/" . basename($_FILES["image"]["name"]);

if ( move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file) )
{
    echo "The file ". basename( $_FILES["photo"]["name"]). " has been uploaded.";
}
else
{
    echo "Sorry, there was an error uploading your file.";
}

最简单的解决方案是使用 base64 图像格式。

您可以在选项中将 bese64 设置为 true:

    let picker = await ImagePicker.launchImageLibraryAsync({ base64:true });

并在经典 json 对象中附加值并避免 multipar/fomr-data,仅用于 php 解码 base64 图像。