Ionic Cordova相机上传文件使用XHR而不是文件传输插件

I am using Cordova Camera Plugin in Ionic 1 (Angular 1.3) and I need to upload this image to the server. Since the cordova-plugin-file-transfer is now deprecated and it is recommended to now upload the file using xhr and cordova-plugin-file, I am stuck here on how to proceed. I couldnt find any examples on this and the link I read for this did not help me on how I can upload the imageUrl gotten from Cordova Camera Plugin. This is what I have so far:

我在Ionic 1(Angular 1.3)中使用Cordova Camera Plugin,我需要将此图像上传到服务器。由于现在不推荐使用cordova-plugin-file-transfer,建议现在使用xhr和cordova-plugin-file上传文件,我仍然坚持如何继续。我无法找到任何关于此的示例,我读到的链接对我如何上传从Cordova Camera Plugin获取的imageUrl没有帮助。这是我到目前为止:

function openCamera() {
            var options = {
                  quality: 50,
                  destinationType: Camera.DestinationType.FILE_URI,
                  sourceType: Camera.PictureSourceType.CAMERA,
                  allowEdit: true,
                  encodingType: Camera.EncodingType.JPEG,
                  mediaType: Camera.MediaType.PICTURE,
                  correctOrientation: true 
            }
            var func = fileTransfer;

            navigator.camera.getPicture(function cameraSuccess(imageUri) {
                console.log(imageUri);
                // Upload the picture
                func(imageUri);

            }, function cameraError(error) {
                console.debug("Unable to obtain picture: " + error, "app");

            }, options);
}

function fileTransfer(imageUri) {
          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
              console.log('file system open: ' + fs.name);
              fs.root.getFile(imageUri, { create: true, exclusive: false }, function (fileEntry) {
                  fileEntry.file(function (file) {
                      var reader = new FileReader();
                      reader.onloadend = function() {
                          // Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
                          var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpg" });
                          var oReq = new XMLHttpRequest();
                          var server = 'http://serverurl.com/upload.php';
                          oReq.open("POST", server, true);
                          oReq.onload = function (oEvent) {
                              // all done!
                          };
                          // Pass the blob in to XHR's send method
                          oReq.send(blob);
                      };
                      // Read the file as an ArrayBuffer
                      reader.readAsArrayBuffer(file);
                  }, function (err) { console.error('error getting fileentry file!' + JSON.stringify(err)); });
              }, function (err) { console.error('error getting file! ' + JSON.stringify(err)); });
          }, function (err) { console.error('error getting persistent fs! ' + JSON.stringify(err)); });
}

I understand the fileTransfer() is wrong here since I have just used what I read in the link and I cant expect to magically work. I have no idea on how I can use the imageUrl I got from navigator.camera.getPicture and upload it using Ajax in Angular 1.3.

我理解fileTransfer()在这里是错误的,因为我刚刚使用了我在链接中读到的东西而且我不能期望神奇地工作。我不知道如何使用navigator.camera.getPicture中的imageUrl并在Angular 1.3中使用Ajax上传它。

The above code fails in error getting file! {"code":5}.

上面的代码在获取文件时出错! { “代码”:5}。

Can someone help me please?

有谁可以帮助我吗?

1 个解决方案

#1

Instead of using file path you can try below solution.

您可以尝试以下解决方案,而不是使用文件路径。

function b64toBlob(b64Data, contentType, sliceSize) {

        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];


        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {

                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }