如何在 fetch 中传递 POST 参数以在 React Native 中将图像上传到服务器？

Posted 2023-02-27

【中文标题】如何在 fetch 中传递 POST 参数以在 React Native 中将图像上传到服务器？

【英文标题】：How to pass POST parameters in fetch for uploading image to server in React Native?

【发布时间】：2019-06-09 08:54:09

【问题描述】：

这是我尝试将图像发送到服务器的代码。

 postData = async () =>    
        var location = await AsyncStorage.getItem('location');        
        var path = await AsyncStorage.getItem('path');
        var post_type = await AsyncStorage.getItem('post_type');    
        var userId = await AsyncStorage.getItem('userID');

    const formData = new FormData();

//I want to pass params in fetch but I don't know how to.     

       var params = JSON.stringify( 
            "user": userId,
            "description": this.state.description,
            "location": location,
            "post_type": post_type,
          );

    const uriPart = path.split('.');
    const fileExtension = uriPart[uriPart.length - 1];

    formData.append('photo', 
        uri: path,
        name: `photo.$fileExtension`,
        type: `image/$fileExtension`,
    );

    fetch(strings.baseUri+"addPosts",
        method: 'POST',
        headers: 
            'Content-Type': 'multipart/form-data',
          ,
        body: formData,
      )
      .then((response) => response.json())
      .then((responseJson) => 

       alert(responseJson); // This gives me error JSON Parse error: Unexpected EOF

      )
      .catch((error) => 
          console.error(error);
      );    
  

我想在 fetch 中传递我的参数。在我的情况下，参数是参数。我想将这些参数与我的图像一起发送到服务器。请帮忙。

更新

this is when I used alert(JSON.stringify(response));

【问题讨论】：

检查***.com/questions/38691379/…

IftekharDani 我检查了这个解决方案。但它并没有告诉我如何在 fetch 中传递我的参数。

【参考方案1】：

FormData 不能接受字符串化的 JSON，但您可以遍历对象，将值附加到表单。 像这样：

var params =  
            "user": userId,
            "description": this.state.description,
            "location": location,
            "post_type": post_type,
          ;

    const uriPart = path.split('.');
    const fileExtension = uriPart[uriPart.length - 1];

    formData.append('photo', 
        uri: path,
        name: `photo.$fileExtension`,
        type: `image/$fileExtension`,
    );

    Object.keys(params).forEach(key => formData.append(key, params[key]));

    fetch(strings.baseUri+"addPosts",
        method: 'POST',
        headers: 
            'Content-Type': 'multipart/form-data',
          ,
        body: formData,
      )
      .then((response) => response.json())
      .then((responseJson) => 

       alert(responseJson); // This gives me error JSON Parse error: Unexpected EOF

      )
      .catch((error) => 
          console.error(error);
      );    
  

【讨论】：

它给了我一个警告。 “TyperError：请求的键值不是对象。”

@ShubhamBisht 你删除了对象的字符串化吗？

是的，我做到了。它仍然给我一个来自alert(responseJson)

的 JSON Parse 错误

请帮忙。我对此一无所知。

@ShubhamBisht response 是什么，你能记录一下吗？

【参考方案2】：

你可以通过append传递参数

参考链接：How do I post form data with fetch api?

const formData = new FormData();

formData.append('photo', 
  uri: path,
  name: `photo.$fileExtension`,
  type: `image/$fileExtension`,
);

formData.append('user', userId);
formData.append('description', description);
formData.append('location', location);
formData.append('post_type', post_type);

【讨论】：

它仍然给我错误 - JSON Parse error: Unexpected EOF

首先，您在服务器上检查您获取参数和图像？

同时记录 response 在转换为 JSON 之前得到的结果

我查过了。我没有在服务器上得到任何东西。我使用了alert(response)，它给了我输出 [object Object]

您可以使用console.log(JSON.stringify(response))登录