在ios中使用cordova-file-transfer插件上传多部分表单数据图像失败答案

【问题标题】：Multi part form-data image upload using cordova-file-transfer plugin in ios fails在ios中使用cordova-file-transfer插件上传多部分表单数据图像失败
【发布时间】：2016-09-25 17:13:15
【问题描述】：

我必须使用我的 ionic 项目中的多部分图像上传将图像上传到服务器。这是我的代码，

$scope.uploadImage = function(imageUrl) {
      var fileName = imageUrl.substring(imageUrl.lastIndexOf('/')+1);
      var json=  {
        "id":123,
        "name" :fileName
      }
      var fileUploadOptions = new FileUploadOptions();
     fileUploadOptions.fileKey="file";
     fileUploadOptions.fileName = fileName;
     fileUploadOptions.params = {
       json : json
     };
     fileUploadOptions.mimeType="image/jpeg";
     var URL = 'http://192.168.43.7:8080/services/uploadImage'
     var encodedURI = encodeURI(URL);
     console.log('fileUploadOptions : ',fileUploadOptions);
     var ft = new FileTransfer();
     ft.upload(imageUrl, encodedURI, onSuccess, onError, fileUploadOptions, false);

     function onSuccess(response){
      console.log('file uploaded: ',response);
     }
     function onError(error){
       console.log('upload failed',error);
     }
   }

我正在使用以下插件

cordova-plugin-file
cordova-plugin-file-transfer
cordova-plugin-camera

我的图像捕获代码是

$scope.takePhoto = function() {

            var options = {
                quality: 75,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: 1,
                allowEdit: false,
                encodingType: 0,
                targetWidth: 1280,
                targetHeight: 720,
                popoverOptions: CameraPopoverOptions,
                direction: 1,
                saveToPhotoAlbum: true
            };

            var cameraSuccess = function(imageData) {
                onPhotoURISuccess(imageData);

                function onPhotoURISuccess(imageURI) {
                    createFileEntry(imageURI);
                }

                function createFileEntry(imageURI) {
                    window.resolveLocalFileSystemURL(imageURI, copyPhoto, fail);
                }

                function copyPhoto(fileEntry) {
                    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
                        fileSys.root.getDirectory("photos", { create: true, exclusive: false }, function(dir) {
                            var fileName = 12 + "_" + 56 + "_" + 67 + ".jpg";
                            fileEntry.copyTo(dir, fileName, onCopySuccess, fail);
                        }, fail);
                    }, fail);
                }

                function onCopySuccess(entry) {
                    console.log('Full path: ', JSON.stringify(entry));
                    var path = entry.toURL();
                    $scope.imageUrl = path;
                    console.log('imageUrl: ',$scope.imageUrl);

                }

                function fail(error) {
                    console.error(JSON.stringify(error));
                    var cause = "";
                    if (error.code == 20) {
                        cause = "Camera permission denied"
                    }

                }

            }

            var cameraError = function(error) {
                console.log('camera error: ', error);
            }
            navigator.camera.getPicture(cameraSuccess, cameraError, options);



        }

我将$scope.imageUrl 变量传递给上传函数。

代码在安卓设备上运行良好。但是iOS，上传失败。

我来了

com.fasterxml.jackson.databind.JsonMappingException: No content to map due to end-of-input

我的服务器控制台出错。

在我的设备控制台中，我收到以下错误，

上传失败
正文：“发生错误。请联系系统管理员。” 代码：3 异常：空 http_status: 500 来源：“file:///var/mobile/Containers/Data/Application/8C4518AC-5606-4806-A8D2-216125EFE725/Documents/photos/12_56_57.jpg” 目标：“http://192.168.43.7:8080/services/uploadImage”

错误正文中的消息来自我的服务器。根据我从服务器得到的错误，我知道 JSON 部分没有上传到服务器。我尝试在不发送 JSON 对象的情况下使用邮递员重新创建相同的问题。我遇到了同样的错误。

有人知道是什么问题吗？为什么只有 iOS 设备才有这个问题？

【问题讨论】：

标签： ios cordova ionic-framework multipartform-data file-transfer

【解决方案1】：

来自文档：

params：一组可选的键/值对，用于在 HTTP 请求中传递。（对象，键/值 - DOMString）

尝试改用fileUploadOptions.params = { json : JSON.stringify(json) }。

【讨论】：

非常感谢。您解决了困扰我三天的问题。

【解决方案2】：

var imageUrI="file:///storage/emulated/0/newfile.csv";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg/csv";

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;
options.chunkedMode = false;

var ft = new FileTransfer();
ft.upload(imageURI, "http://fileupload/admin/add_image_my.php",
function (result) {
    console.log(JSON.stringify(result));
},
function (error) {
    console.log(JSON.stringify(error));
}, options);

【讨论】：