从 react-native 获取文件以上传与 `<input type="file" onChange={this.fileChangedHandler}> 相同的图像
Get file from react-native to upload image same as `<input type="file" onChange={this.fileChangedHandler}> `
我试过
var photo = {
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg',
};
并使用
axios
var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');
const config = {
headers: {
'content-Type': 'multipart/form-data'
}
}
MY_API().then(instance => {
// it is axios instance
instance.post("/api/v1/upload",
{ body }
, config).then(res => {
console.log(JSON.stringify(res));
}).catch(err => {
console.log(err);
})
}
)
删除配置后我得到
Error 503
并通过配置给出
Error: Multipart: Boundary not found
并且与 POSTMAN 一起工作也很好...与 headers
一起
我也试过上传文件(blob),但是同样的错误
Error: Multipart: Boundary not found
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt');
console.log(file);
API 使用代码在 ReactJS 中运行良好
EDIT :我已经使用 React-native-fetch-blob 解决了问题,但希望使用 axios 解决问题,
这是代码:
RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
'authorization': jwtToken,
'Content-Type': 'multipart/form-data',
},
[
{ name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
{ name: 'name', data: name }
]
).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
});
永远不要在发送文件时定义 content-type header。
Browser/Postman 会自动添加,如下所示。
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7BojnnMEteO0aHWP
表单边界是表单数据的分隔符。发送请求时会计算边界,因此您不能对其进行硬编码。
这就是为什么您会收到未找到错误边界的原因。
现在你可以使用 fetch 和 axios 任何东西,它会起作用。
这是 MDN Fetch 文档中未捕获的非常重要的信息
我已经使用 React-native-fetch-blob 解决了问题,但希望使用 axios 解决问题,
这是代码:
RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
'authorization': jwtToken,
'Content-Type': 'multipart/form-data',
},
[
{ name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
{ name: 'name', data: name }
]
).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
});
我试过
var photo = {
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg',
};
并使用
axios
var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');
const config = {
headers: {
'content-Type': 'multipart/form-data'
}
}
MY_API().then(instance => {
// it is axios instance
instance.post("/api/v1/upload",
{ body }
, config).then(res => {
console.log(JSON.stringify(res));
}).catch(err => {
console.log(err);
})
}
)
删除配置后我得到
Error 503
并通过配置给出
Error: Multipart: Boundary not found
并且与 POSTMAN 一起工作也很好...与 headers
一起我也试过上传文件(blob),但是同样的错误
Error: Multipart: Boundary not found
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt');
console.log(file);
API 使用代码在 ReactJS 中运行良好
EDIT :我已经使用 React-native-fetch-blob 解决了问题,但希望使用 axios 解决问题,
这是代码:
RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
'authorization': jwtToken,
'Content-Type': 'multipart/form-data',
},
[
{ name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
{ name: 'name', data: name }
]
).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
});
永远不要在发送文件时定义 content-type header。 Browser/Postman 会自动添加,如下所示。
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7BojnnMEteO0aHWP
表单边界是表单数据的分隔符。发送请求时会计算边界,因此您不能对其进行硬编码。
这就是为什么您会收到未找到错误边界的原因。
现在你可以使用 fetch 和 axios 任何东西,它会起作用。
这是 MDN Fetch 文档中未捕获的非常重要的信息
我已经使用 React-native-fetch-blob 解决了问题,但希望使用 axios 解决问题,
这是代码:
RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
'authorization': jwtToken,
'Content-Type': 'multipart/form-data',
},
[
{ name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
{ name: 'name', data: name }
]
).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
});