Bilder mit formData an eine Django Rest-API senden

Question

Ich habe ein Django Rest API-Backend und verwende ein React Native Front End. Ich wollte ein Bild in der Rest-API speichern.

Die verwendete Methode POST ist wie folgt:

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

bekomme ich folgende Fehler { „Avatar“: [ „. Die vorgelegten Daten war keine Datei auf dem Formular den Codierungstyp Check“] }

Ich habe auch this.state.avatar.data versucht und versucht, es zu posten, aber am Ende bekomme ich den gleichen Fehler. Ich weiß, dass das Hochladen der Datei funktioniert, da ich es aus dem REST Auto-generierten Formular richtig machen kann. Was scheint das Problem in dem Bild zu sein, das ich poste?

Answer 1

Hier ist, wie Sie es tun können:

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