Bonjour venez apprendre à utiliser js et à réagir en natif. Je ne peux pas utiliser FormData, il montre toujours le type bodyinit non pris en charge. Je veux envoyer du texte plutôt que JSON.stringify. Quelqu'un peut-il m'aider? Merci!
var data = new FormData()
data.append('haha', 'input')
fetch('http://www.mywebsite.com/search.php', {
method: 'post',
body: data
})
.then((response) => response.json())
.then((responseData) => {
console.log('Fetch Success==================');
console.log(responseData);
var tempMarker = [];
for (var p in responseData) {
tempMarker.Push({
latitude: responseData[p]['lat'],
longitude: responseData[p]['lng']
})
}
this.setState({
marker: tempMarker
});
})
.catch((error) => {
console.warn(error);
})
.done();
Voici mon code simple FormData avec react-native pour poster une demande avec chaîne et image.
J'ai utilisé react-native-image-picker pour capturer/sélectionner une photo react-native-image-picker
let photo = { uri: source.uri}
let formdata = new FormData();
formdata.append("product[name]", 'test')
formdata.append("product[price]", 10)
formdata.append("product[category_ids][]", 2)
formdata.append("product[description]", '12dsadadsa')
formdata.append("product[images_attributes[0][file]]", {uri: photo.uri, name: 'image.jpg', type: 'image/jpeg'})
[~ # ~] note [~ # ~] vous pouvez changer en image/jpeg
à votre type de contenu d'image. Vous pouvez obtenir une réponse du sélecteur d’image de type de contenu.
fetch('http://192.168.1.101:3000/products',{
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formdata
}).then(response => {
console.log("image uploaded")
}).catch(err => {
console.log(err)
})
});
Cela a fonctionné pour moi
var serializeJSON = function(data) {
return Object.keys(data).map(function (keyName) {
return encodeURIComponent(keyName) + '=' + encodeURIComponent(data[keyName])
}).join('&');
}
var response = fetch(url, {
method: 'POST',
body: serializeJSON({
haha: 'input'
})
});
Fournir une autre solution; nous utilisons aussi react-native-image-picker
; et le côté serveur utilise koa-multer
; cette installation fonctionne bien:
i
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {}
else if (response.error) {}
else if (response.customButton) {}
else {
this.props.addPhoto({ // leads to handleAddPhoto()
fileName: response.fileName,
path: response.path,
type: response.type,
uri: response.uri,
width: response.width,
height: response.height,
});
}
});
handleAddPhoto = (photo) => { // photo is the above object
uploadImage({ // these 3 properties are required
uri: photo.uri,
type: photo.type,
name: photo.fileName,
}).then((data) => {
// ...
});
}
client
export function uploadImage(file) { // so uri, type, name are required properties
const formData = new FormData();
formData.append('image', file);
return fetch(`${imagePathPrefix}/upload`, { // give something like https://xx.yy.zz/upload/whatever
method: 'POST',
body: formData,
}
).then(
response => response.json()
).then(data => ({
uri: data.uri,
filename: data.filename,
})
).catch(
error => console.log('uploadImage error:', error)
);
}
serveur
import multer from 'koa-multer';
import RouterBase from '../core/router-base';
const upload = multer({ dest: 'runtime/upload/' });
export default class FileUploadRouter extends RouterBase {
setupRoutes({ router }) {
router.post('/upload', upload.single('image'), async (ctx, next) => {
const file = ctx.req.file;
if (file != null) {
ctx.body = {
uri: file.filename,
filename: file.originalname,
};
} else {
ctx.body = {
uri: '',
filename: '',
};
}
});
}
}
J'ai utilisé react-native-image-picker
pour sélectionner une photo. Dans mon cas, après avoir choisi le photp de mobile. Je stocke ses informations dans le composant state
. Après, j'envoie la demande POST
en utilisant fetch
comme ci-dessous
const profile_pic = {
name: this.state.formData.profile_pic.fileName,
type: this.state.formData.profile_pic.type,
path: this.state.formData.profile_pic.path,
uri: this.state.formData.profile_pic.uri,
}
const formData = new FormData()
formData.append('first_name', this.state.formData.first_name);
formData.append('last_name', this.state.formData.last_name);
formData.append('profile_pic', profile_pic);
const Token = 'secret'
fetch('http://10.0.2.2:8000/api/profile/', {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data",
Authorization: `Token ${Token}`
},
body: formData
})
.then(response => console.log(response.json()))
J'ai utilisé des données de formulaire avec le plugin ImagePicker . et je l'ai obtenu s'il vous plaît vérifier ci-dessous le code
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
fetch(globalConfigs.api_url+"/gallery_upload_mobile",{
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
,
body: JSON.stringify({
data: response.data.toString(),
fileName: response.fileName
})
}).then(response => {
console.log("image uploaded")
}).catch(err => {
console.log(err)
})
}
});
Si vous souhaitez définir un type de contenu personnalisé pour l'élément formData:
var img = {
uri : 'file://opa.jpeg',
name: 'opa.jpeg',
type: 'image/jpeg'
};
var personInfo = {
name : 'David',
age: 16
};
var fdata = new FormData();
fdata.append('personInfo', {
"string": JSON.stringify(personInfo), //This is how it works :)
type: 'application/json'
});
fdata.append('image', {
uri: img.uri,
name: img.name,
type: img.type
});