React Native将图像上传到服务器上的php页面答案

【问题标题】：React Native uploading Image to php page on serverReact Native将图像上传到服务器上的php页面
【发布时间】：2020-09-07 01:59:49
【问题描述】：

我在 Web 服务器上有 PHP 页面，用于从 React Native 上传图像。

使用 Postman 方法 POST，form-data key:avatar value: image_file 一切正常。

在 React Native 中我尝试过：

let uploadData = new FormData();
uploadData.append('avatar', uploadUri);
fetch(base_url, { method: 'post,', body: uploadData }).then(
  (res) => {
    var myresponse = res;

    console.log(JSON.stringify(myresponse));
    //console.log(res);
  }
);

我收到服务器错误：

{"type":"default","status":400,"ok":false,"headers":{"map":{"server":"Apache","connection":"升级， close","content-type":"text/html","vary":"Accept-Encoding,User-Agent","date":"星期三, 2020 年 5 月 20 日 15:29:15 GMT","accept-ranges":"bytes","upgrade":"h2,h2c"}},"url":"http://www./uploadImage.php","_bodyInit":{"_data":{"size":10154 ,"offset":0,"blobId":"D8041FEE-0479-4CD5-8438-4EFD737561DE","type":"text/html","name":"uploadImage.php","__collector":{}} },"_bodyBlob":{"_data":{"size":10154,"offset":0,"blobId":"D8041FEE-0479-4CD5-8438-4EFD737561DE","type":"text/html", "name":"uploadImage.php","__collector":{}}}}

比我尝试使用 axios：

let uploadData = new FormData();
uploadData.append('avatar', uploadUri);
axios.post(base_url, uploadData).then((res) => {
  console.log(res);
});

我从服务器得到这个响应：

“错误”：是的，
"message": "没有发送文件！",
“状态”：“错误”，

在 PHP 中失败：if($_FILES['avatar'])。

我不知道该做什么了，再次在 Postman 中一切正常。

有人知道该怎么做吗？

我再次测试了它，肯定是我发送的 URI 有问题。

即。如果我在 Postman 中查看我发送的请求：

avatar=@/Users/......image.jpg

我在 React Native 中发送：

"avatar","file:///Users/.....image.jpg

顺便说一句，我正在使用 expo-image-picker 来选择图像。

【问题讨论】：

标签： php react-native axios fetch

【解决方案1】：

看起来这工作..

let body = new FormData();
                            //Appending file to body
                            body.append('avatar', {
                                uri: uploadUri,
                                type: 'image/jpeg', //This is the file type .. you can define according to your requirement
                                name: 'avatar.jpg', //File name you want to pass
                            });
                            //Service call
                            fetch(base_url, {
                                method: 'POST',
                                headers: new Headers({
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                }),
                                body: body,
                            })
                                .then((res) => res.json())
                                .then((responseJson) => {
                                    //GET RESPONSE SUCCESS OF FAILURE
                                    console.log(JSON.stringify(responseJson));
                                })
                                .catch((error) => {
                                    //ERROR
                                    console.log(JSON.stringify(error));
                                });

【讨论】：