[英]How to use FormData in react-native?
您好,刚学会使用 js 和 react-native。我不能使用 FormData,它总是显示不受支持的 bodyinit 类型。 我想发送文本而不是 JSON.stringify。 谁能帮我? 谢谢!
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();
这是我的简单代码 FormData,带有 react-native 来发布带有字符串和图像的请求。
我使用 react-native-image-picker 来捕捉/选择照片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'})
注意您可以将image/jpeg
更改为其他内容类型。 您可以从图像选择器响应中获取内容类型。
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)
})
});
这对我有用
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'
})
});
如果要为 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
});
提供一些其他的解决方案; 我们也在使用react-native-image-picker
; 并且服务器koa-multer
在使用koa-multer
; 此设置运行良好:
用户界面
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) => {
// ...
});
}
客户
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)
);
}
服务器
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: '',
};
}
});
}
}
我使用react-native-image-picker
来选择照片。 在我的情况下,从移动设备中选择了 photp 后。 我将它的信息存储在组件state
。 之后,我使用fetch
发送POST
请求,如下所示
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()))
您可以使用react-native-image- picker和axios (form-data)
uploadS3 = (path) => {
var data = new FormData();
data.append('files',
{ uri: path, name: 'image.jpg', type: 'image/jpeg' }
);
var config = {
method: 'post',
url: YOUR_URL,
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data",
},
data: data,
};
axios(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
}
react-native-image-picker
selectPhotoTapped() {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
},
};
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 {
let source = { uri: response.uri };
// Call Upload Function
this.uploadS3(source.uri)
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source,
});
// this.imageUpload(source);
}
});
}
我一直在寻找解决问题的答案,这就是我所做的
我用 expo-document-picker 取文件
const pickDocument = async (tDocument) => {
let result = await DocumentPicker.getDocumentAsync();
result.type = mimetype(result.name);
if (result.type === undefined){
alert("not allowed extention");
return null;
}
let formDat = new FormData();
formDat.append("file", result);
uploadDoc(formDat);
};
const mimetype = (name) => {
let allow = {"png":"image/png","pdf":"application/json","jpeg":"image/jpeg", "jpg":"image/jpg"};
let extention = name.split(".")[1];
if (allow[extention] !== undefined){
return allow[extention]
}
else {
return undefined
}
}
const uploadDoc = (data) => {
fetch("MyApi", {
method: "POST",
body: data
}).then(res => res.json())
.then(response =>{
if (response.result === 1) {
//somecode
} else {
//somecode
}
});
}
这是因为 android 不管理文件的 mime 类型,所以如果你把标题“内容类型”放在一边,而是将 mime 类型放在文件上,它会发送正确的标题
适用于 IOS 和 Android
我在ImagePicker插件中使用了表单数据。 我让它工作了请检查下面的代码
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)
})
}
});
我正在使用 Expo SDK 42(react-native v0.63)。 我正在使用expo-document-picker
库来选择文档并上传到服务器。
我假设您想使用FormData
上传某种文件。
这是我用来打开选择器并获取有关文件的元数据的代码。
import * as DocumentPicker from 'expo-document-picker';
const result = await DocumentPicker.getDocumentAsync({
type: 'image/*',
copyToCacheDirectory: false,
multiple: false,
});
if (result.type === 'success') {
const name_split = result.name.split('.');
const ext = name_split[name_split.length - 1];
result.type = helper.get_mime_type(ext);
delete result.size;
}
(您可以编写函数以从文件扩展名中获取 mime 类型或使用 npm 中的某些库)
result
具有以下信息:
result.uri // "content://path/to/file.ext"
result.name // filename
result.type // the mime type of the file such as "image/png"
这是我用来使用axios
库将文件上传到服务器的axios
:
const formdata = new FormData();
formdata.append('custom_param', 'value');
formdata.append('file', result); // 'result' is from previous code snippet
const headers = {
accept: 'application/json',
'content-type': 'multipart/form-data',
};
const opts = {
method: 'POST',
url: 'your backend endpoint',
headers: headers,
data: formdata,
};
return await axios.request(axiosopts);
如果您收到 multipart: boundry not found 错误,您可以使用 fetch api 而不是 axios 它适用于 fetch 但由于某种原因不适用于 axios。
fetch('http://192.168.10.38:8080/api/auth/register',{
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formdata
}).then(response => {
console.log("success")
}).catch(err => {
console.log(err)
})
});
为我工作。
// imageObject
{
name: string,
type: string,
uri: string,
}
// body
const formData = new FormData();
formData.append('name', postData.name);
formData.append('properties', {
string: JSON.stringify(postData.properties),
type: 'application/json',
});
postData.slides.forEach(v => {
formData.append('slideImages', v);
});
formData.append('detailImage', postData.detailImage);
// request
requestInit: {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.