React native 如何使用RNFetchBlob.fetch和react本机文档选择器上载多个文件
我正在使用react native document picker和rn fetch blob上载文件。对于单个文件,它可以按预期工作。但我无法将多个文件上载到服务器 上传功能React native 如何使用RNFetchBlob.fetch和react本机文档选择器上载多个文件,react-native,rn-fetch-blob,React Native,Rn Fetch Blob,我正在使用react native document picker和rn fetch blob上载文件。对于单个文件,它可以按预期工作。但我无法将多个文件上载到服务器 上传功能 const uploadPic=()=>{ // alert('ddf'); RNFetchBlob.fetch('POST', 'http://localhost/test.upload.php', { Authorization : "Bearer access-to
const uploadPic=()=>{
// alert('ddf');
RNFetchBlob.fetch('POST', 'http://localhost/test.upload.php', {
Authorization : "Bearer access-token",
otherHeader : "foo",
'Content-Type' : 'multipart/form-data',
}, [
// element with property `filename` will be transformed into `file` in form data
{name : 'image', filename : singleFile.name, type: singleFile.type, data: RNFetchBlob.wrap(singleFile.uri)}
]).then((resp) => {
console.log(resp);
alert('your image uploaded successfully');
})
}
上传单个文件很好,但我需要上传多个文档
选择函数
let selectFile = async () => {
//Opening Document Picker to select one file
try {
const res = await DocumentPicker.pick({
//Provide which type of file you want user to pick
type: [DocumentPicker.types.allFiles],
//There can me more options as well
// DocumentPicker.types.allFiles
// DocumentPicker.types.images
// DocumentPicker.types.plainText
// DocumentPicker.types.audio
// DocumentPicker.types.pdf
});
//Printing the log related to the file
console.log('res : ' + JSON.stringify(res));
//Setting the state to show single file attributes
setSingleFile(res);
} catch (err) {
setSingleFile(null);
//Handling any exception (If any)
if (DocumentPicker.isCancel(err)) {
//If user canceled the document selection
alert('Canceled from single doc picker');
} else {
//For Unknown Error
alert('Unknown Error: ' + JSON.stringify(err));
throw err;
}
}
};
我将此行从const res=await DocumentPicker.pick({
更改为const res=await DocumentPicker.pickMultiple({
在控制台中,将发布所有文件的数组
现在我需要将所有文件上传到服务器,寻找一个解决方案来循环RNFetchBlob.fetch中的所有数据
我在函数中添加了循环,如下所示
const uploadPic=()=>{
// alert('ddf');
RNFetchBlob.fetch('POST', 'http://localhost/test.upload.php', {
Authorization : "Bearer access-token",
otherHeader : "foo",
'Content-Type' : 'multipart/form-data',
}, [ singleFile.map((item, key) => (
{name : 'image[]', filename : item.name, type: item.type, data: RNFetchBlob.wrap(item.uri)}
))
// element with property `filename` will be transformed into `file` in form data
]).then((resp) => {
console.log(resp);
alert('Document uploaded successfully');
})
}
在控制台中,我现在得到的错误
RNFetchBlob failed to create request multipart body :com.facebook.react.bridge.ReadableNativeArray cannot be cast to com.facebook.react.bridge.ReadableNativeMap
[Tue Jun 23 2020 05:36:26.918] WARN Attempt to invoke virtual method 'int java.io.InputStream.read(byte[], int, int)' on a null object reference
[Tue Jun 23 2020 05:36:27.363] LOG {"array": [Function anonymous], "base64": [Function anonymous], "blob": [Function anonymous], "data": "{\"Message\":\"sorry\",\"Status\":\"Error\"}",