React Native在服务器上上传图片到php页面。

Posted 2021-04-03

我在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": "Upgrade, close", "content-type": "texthtml", "variety": "Accept-Encoding,User-Agent", "date": "Wed, 20 May 2020 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": "texthtml", "name": "uploadImage. php","__collector":{}},"_bodyBlob":{"_data":{"size":10154, "offset":0, "blobId": "D8041FEE-0479-4CD5-8438-4EFD737561DE", "type": "texthtml", "name": "uploadImage.php","__collector":{}}}。

比起我尝试使用axios。

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

我从服务器上得到了这样的回应:

"error": true, "message": "没有发送文件！", "状态": "error",

它是失败的。if($_FILES['avatar'])，在PHP中。

我不知道该怎么做了，在Postman中一切都正常。

有人知道该怎么做吗？

我又测试了一下，肯定是我发送的URI的问题。

即，如果我在Postman中查看我发送的请求，在React Native中，我发送的URI肯定是有问题的。

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

而在React Native中，我发送的是：

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

顺便说一下，我使用expo -image -picker来选择图片。

答案

它看起来像这样做的工作...

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));
                                });