Firebase Storage v3返回“多部分主体不包含2或3个部分”在Android 4.2.2和4.3上 [英] Firebase Storage v3 returning "multipart body does not contain 2 or 3 parts" on Android 4.2.2 and 4.3
问题描述
我正在构建一个在Android 5和4上部署的Ionic应用程序。当我尝试使用Firebase v3存储参考（使用firebase.js API）在Android 4.2.2和4.3上保存Blob时，它失败了： / p>
I am building an Ionic app to deploy on Android 5 and 4. When I try to use a Firebase v3 storage ref (using firebase.js API) to save a Blob on Android 4.2.2 and 4.3 it fails with:
code: "storage/unknown"
message: "Firebase Storage: An unknown error occurred, please check the error payload for server response."
serverResponse: "multipart body does not contain 2 or 3 parts."
name: "FirebaseError"
这适用于Android 5.0.1和4.4。虽然有2个设备。
This works fine on an Android 5.0.1 and 4.4.2 device though.
问题：
这是Android（或包含的webkit）版本的硬限制吗？或者我正在使用firebase.js API中的一些不兼容性？我试图了解问题是否可以解决或者是否可以做任何事情。
Question: Is this a hard limitation of the Android (or included webkit) versions? Or some incompatibility in the firebase.js API I'm using? I'm trying to understand if the problem can be fixed or if nothing can be done.
我能找到的唯一其他对该错误消息的引用是： https://github.com/davideast/firebase-react-native-sample/issues / 5
The only other reference to that error message I could find was here: https://github.com/davideast/firebase-react-native-sample/issues/5
但是看到这是一个离子包装应用程序，我可以访问Blob类型。
But seeing as this is an ionic wrapper app, I do have access to the Blob type.
使用cordova-plugin-camera扩展程序拍摄照片，使用Camera.DestinationType.FILE_URI将其保存到手机本地存储空间来创建文件
The file is created by taking a picture using the cordova-plugin-camera extension, saving it to the phones local storage with Camera.DestinationType.FILE_URI
然后使用cordova-plugin-file扩展程序将其读回Blob，然后保存到Firebase存储（特别是Google Cloud Store支持的存储，因为它使用的是firebase v3）。
It is then read back into a Blob using the cordova-plugin-file extension before being saved to Firebase Storage (specifically the Google Cloud Store backed storage because this is using firebase v3).
Blob似乎是成功创建的（尽管如果新的Blob构造函数不可用，它可能会回退到使用BlobBuilder - 请参阅代码段）
The Blob seems to be created successfully (although it may fall back to using the BlobBuilder if the new Blob constructor is not available - see code snippet)
代码的相关部分（来自AngularJS控制器）如下所示：
The relevant section of code (from within an AngularJS controller) looks like:
var makeBlob = function(data, mimeString) {
try {
return new Blob([data], {
type: mimeString
});
} catch (err) {
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(data);
return bb.getBlob(mimeString);
}
};
$scope.uploadLocalImageAsync = function(localImageFileUrl, responseKey, description) {
var deferred = $q.defer();
$window.resolveLocalFileSystemURL(localImageFileUrl, function fileEntrySuccess(fileEntry) {
fileEntry.file(function fileSuccess(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
try {
var imageBlob = makeBlob(evt.target.result, 'image/jpeg');
alert("imageBlob: " + JSON.stringify(imageBlob));
var metadata = {
contentType: 'image/jpeg',
customMetadata: {
'response': responseKey,
'description': description
}
};
// Create a root reference
var storageRef = firebase.storage().ref();
var fileRef = storageRef.child('images/' + responseKey + '/' + file.name);
var uploadTask = fileRef.put(imageBlob, metadata);
uploadTask.on('state_changed', function(snapshot) {
// Observe state change events such as progress, pause, and resume
// See below for more detail
alert(JSON.stringify(snapshot));
}, function(error) {
// Handle unsuccessful uploads
alert(JSON.stringify(error));
deferred.reject("Upload failed: " + error.code + ": " + error.message)
}, function() {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
var downloadURL = uploadTask.snapshot.downloadURL;
deferred.resolve({
gsPath: fileRef.toString(),
downloadUrl: downloadURL
});
});
} catch (err) {
deferred.reject("onloadend error: " + err);
}
};
try {
reader.readAsArrayBuffer(file);
} catch (err) {
deferred.reject("readAsArrayBuffer error: " + err);
}
}, function fileFailure() {
deferred.reject("Couldn't make File object");
});
},
function fileEntryFailure() {
deferred.reject("Couldn't find fileEntry for image");
});
return deferred.promise;
};
localImageFileUrl的形式为 file：///storage/sdcard0/Android/data/com.ionicframework.myapp/cache/1471426280702.jpg
localImageFileUrl is of the form "file:///storage/sdcard0/Android/data/com.ionicframework.myapp/cache/1471426280702.jpg"
该函数实际返回一个稍后解决的promise在AngularJS控制器的另一部分。
The function actually returns a promise which is resolved later in another part of the AngularJS controller.
启动uploadTask后发生故障。
The failure occurs after starting the uploadTask.
再次，这是有效的在Android 5.0.1,4.4.2但在4.3,4.2.2上失败
Again, this works on Android 5.0.1, 4.4.2 but fails on 4.3, 4.2.2
我希望在Ionic中有一些额外的设置或者我缺少的东西。但我真的只是不知道造成行为差异的原因或者我能做些什么。
I'm hoping there is some extra setting in Ionic or something that I'm missing. But I really just don't know what is causing the difference in behavior or if there will be anything I can do about it.
我尝试过的事情：
我尝试将cordova android平台降级到3.5以定位android-17（4.2。 2）具体（使用类似于 https://stackoverflow.com/a/32672214/6729807 的内容），但它会产生同样的错误。
I've tried downgrading the cordova android platform to 3.5 to target android-17 (4.2.2) specifically (using something similar to here https://stackoverflow.com/a/32672214/6729807 ) but it produces the same error.
（我也将不同的插件降级到适当的级别）
(I also downgraded the different plugins to appropriate levels too)
有关正在使用的工具版本的一些信息：
离子信息：
您的系统信息：
Cordova CLI: 6.3.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v4.4.7
离子平台版本android：
ionic platform version android:
Installed platforms:
android 5.2.1
/platforms/android/AndroidManifest.xml
/platforms/android/AndroidManifest.xml
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" />
/platforms/android/project.properties（和CordovaLib project.properties）
/platforms/android/project.properties (and CordovaLib project.properties)
target=android-23
已安装的插件：
cordova-plugin-camera
cordova-plugin-compat
cordova-plugin-file
cordova-plugin-geolocation
cordova-plugin-whitelist
使用
https://www.gstatic.com/firebasejs/3.3.0/firebase.js
和
https://github.com/firebase/angularfire（release v2.0.1）
推荐答案
The resolving key was using RNFetchBlob.polyfill.XMLHttpRequest;
import RNFetchBlob from 'react-native-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
install package
- https://github.com/wkh237/react-native-fetch-blob
and execute code
- https://github.com/wkh237/rn-firebase-storage-upload-sample/blob/master/index.common.js
also read http://stackoverflow.com/questions/39160006/react-native-firebase-storage-upload-using-putstring-call
这篇关于Firebase Storage v3返回“多部分主体不包含2或3个部分”在Android 4.2.2和4.3上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
