Question

我在Ionic 1（Angular 1.3）中使用Cordova Camera Plugin，我需要将此图像上传到服务器。由于cordova-plugin-file-transfer现已弃用，建议现在使用xhr和cordova-plugin-file上传文件，因此我不知道如何继续。我无法找到任何关于此的示例，我读到的link对我如何上传从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)); });
}

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

以上代码在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;
    }

Answer 2

检查您的`fileUri`。

如果文件的路径有 tmp 像 file:///var/mobile/Containers/Data/Application/.../tmp/cdv_photo_003.jpg

你必须使用 LocalFileSystem.TEMPORARY

因为这个图像存在于临时路径中。

window.requestFileSystem(
  LocalFileSystem.TEMPORARY,
  0,
  (fs) => {
    console.log('file system open: ' + fs.name)
    fs.root.getFile(
      fileName,
      { create: true, exclusive: false },
      (fileEntry) => {
        fileEntry.file(
          (file) => {
            const reader = new FileReader()
            reader.onloadend = async () => {
              const formData: FormData = new FormData()
              const blob = new Blob([new Uint8Array(reader.result as any)], { type: 'image/png' })
              formData.append('file', blob)
              await this.http.post('http://apiurl', formData)
            }
            // Read the file as an ArrayBuffer
            reader.readAsArrayBuffer(file)
          },
          function (err) {
            console.error('error getting fileentry file!' + err)
          }
        )
      },
      function (err) {
        console.error('error getting file! ' + err)
      }
    )
  },
  function (err) {
    console.error('error getting persistent fs! ' + err)
  }
)

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

2 个答案:

检查您的`fileUri`。

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

2 个答案:

检查您的fileUri。

检查您的`fileUri`。