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

Question

我在Ionic 1(Angular 1.3)中使用Cordova Camera Plugin,我需要将此图像上传到服务器.由于cordova-plugin-file-transfer现在已弃用,建议现在使用xhr上传文件cordova-plugin-file,因此我不知道如何继续.我找不到任何这方面的例子,我读到的链接对我如何上传imageUrl得到的Cordova Camera Plugin 没有帮助.这是我到目前为止:

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)); });
}

我明白这fileTransfer()是错的,因为我刚刚使用了我在链接中读到的东西,我不能期待神奇的工作.我不知道如何使用imageUrl我从中获得navigator.camera.getPicture并在Angular 1.3中使用Ajax上传它.

上面的代码失败了error getting file! {"code":5}.

有谁可以帮助我吗？

Answer 1

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

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;
    }