使用formData将图像发布到Django Rest API

时间:2017-02-11 05:45:34

标签: rest react-native django-rest-framework

我有一个Django Rest API后端,并且正在使用React Native Front End。我想将图像保存到其余的API。

使用的POST方法如下:

async saveUserData() {
  let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN);

  var formData  = new FormData();
  formData.append("bio",this.state.bio);
  formData.append("website",this.state.website);
  formData.append("phoneno",this.state.phoneno);
  formData.append("gender",this.state.gender);
  formData.append("avatar",this.state.avatar.uri);

   try {
     let response = await fetch(url, {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'multipart/form-data',
         'Authorization': ' Token '+accessToken,
       },
       body: formData
     });

     let responseJson = await response.text();
     if(response.status>=200&&response.status<300){
        console.log("POST Completed");
     }else{
       let error=responseJson;
       console.log(error);
       throw error;
     }
     return responseJson;
   } catch(error) {
     return error;
     console.error(error);
   }
}

我收到以下错误 {&#34; avatar&#34;:[&#34;提交的数据不是文件。检查表单上的编码类型。&#34;]}

我也尝试了this.state.avatar.data并试图发布它,但我最终得到了同样的错误。我知道文件上传工作正常,因为我可以从REST自动生成表单中正确执行。我发布的图片中似乎有什么问题?

1 个答案:

答案 0 :(得分:3)

以下是如何做到这一点:

var formData = new FormData();
formData.append('avatar', {uri: this.state.avatar.uri, name: 'yourname.jpg', type: 'image/jpg'});

let response = await fetch(url, {
   method: 'POST',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'multipart/form-data',
     'Authorization': ' Token '+accessToken,
   },
   body: formData
 });