cordova文件传输插件在ios模拟器中不起作用

时间:2015-06-24 03:36:30

标签: ios cordova ios-simulator ionic

我正在尝试在我的项目中使用相机插件和文件传输。它们在android上工作正常但是当我在ios模拟器上测试时,当我尝试使用cordova文件传输插件上传照片时,我在服务器上获得了一个空的请求体。

在下面的代码中,photo_url是我从相机插件获得的响应。这包含我从图库中选择的照片的完整路径。这是我使用console.log时获得的价值:

file:///Users/user/Library/Developer/CoreSimulator/Devices/87045654-FB0C-40E8-97A8-5634FC2D05E7/data/Containers/Data/Application/E0810976-FF0F-43E2-BC15-3EFDD93D61C4/tmp/cdv_photo_010.jpg

以下是代码:

 var options = new FileUploadOptions();
      options.fileKey = 'file';
      options.fileName = photo_url.substr(photo_url.lastIndexOf('/') + 1).split('?')[0];
      options.mimeType = 'image/jpeg';
      options.params = params;

      var ft = new FileTransfer();
      ft.upload(
        photo_url, me.upload_url + path + '/photo/upload', 
        function(result){
          console.log('success');
          console.log(result);
        },
        function(err){
          console.log('error');
          console.log(err);
        }, 
        options
      );

options.fileName的值为:cdv_photo_010.jpg

我尝试寻找解决方案,但我找到了以下内容:

options.headers = {
 Connection: "close"
};

options.chunkedMode = false;

我将它应用到我现有的代码中但它仍然无效。我在服务器中获取的请求正文仍然是一个空对象。

我正在使用快速服务器和multer来处理文件上传。

这是服务器上的代码:

var multer_options = { 
    dest: './public/uploads',
    fileSize: '',
    fields: 10,
    files: 1,
    rename: function(fieldname, filename){
        return random.string(30) + '-' + Date.now();
    },
    changeDest: function(original_dest, req, res){

        console.log('org dest:');
        console.log(original_dest);

        console.log('request body: ');
        console.log(req.body);

        var j = JSON.parse(req.body);
        console.log('parsed body: ');
        console.log(j);

        var request_data = req.body.request_data;
        console.log('request data: ');
        console.log(request_data);
        var dest = original_dest + '/' + request_data.upload_path;

        console.log('upload path: ');
        console.log(request_data.upload_path);

        console.log('dest: ');
        console.log(dest);

        var stat = null;

        try{
            stat = fs.statSync(dest);
        }catch(err){
            fs.mkdirSync(dest);
        }

        if(stat && !stat.isDirectory()){
            throw new Error('Directory cannot be created because an inode of a different type exists at "' + dest + '"');
        }

        return dest;
    }
};

Multer已经处理了文件上传,所以我要做的就是编写代码来指示multer更改目标目录,这就是我上面的内容。在android中上传文件时,它工作正常。我得到了请求体的值。但在ios上它是空的。所以我认为问题是使用ios模拟器或文件传输插件在使用ios模拟器时出现问题。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

文件上传:Cordova文件传输插件+ ExpressJs Multer

下面的解决方案让我可以用iPhone相机拍照,然后将照片上传到NodeJS服务器。

@Kyokasuigetsu - 几乎放弃了使用Cordova文件传输插件的FILE_URI!

  

请注意options.fileKey = 'myPhoto'和   upload.single('myPhoto')应具有相同的值。它指的是文件上载表单的字段名称。

<!-- Upload a single file -->
<form>  
  <input type="file" name="myPhoto" />
</form>

安装所需的插件和模块(从控制台)

> cordova plugin add cordova-plugin-file-transfer;
> npm install express multer --save;

Cordova(native_app.js)

function uploadPhoto(fileUri) {
  // file:///var/mobile/Containers/Data/Application/
  // .../tmp/cdv_photo.jpg
  console.log("fileUri:", fileUri);

  var options, request;

  options = new FileUploadOptions();
  // The name 'fileKey' is confusing; it should be 'fieldname'
  options.fileKey = 'myPhoto';
  // fileName: 'cdv_photo.jpg';
  options.fileName =
    fileUri.substr(fileUri.lastIndexOf('/') + 1);

  request = new FileTransfer();
  request.upload(
    fileUri,
    encodeURI('http://localhost:8080/photos'),
    function success(response) {
      console.log("Success: Photo uploaded to server!");
    },
    function error(response) {
      console.log("Error: Photo not uploaded to server!");
    },
    options
  );
}

function capturePhoto(callback) {

  navigator.camera.getPicture(
    function success(fileUri) {
      callback(fileUri);
    },
    function error() {},
    { // camera options
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE
    }
  );

}

function captureAndUploadPhoto() {
  capturePhoto(function (fileUrl) {
    uploadPhoto(fileUrl);
  });
}

document.addEventListener("deviceready", captureAndUploadPhoto, false);

NodeJs / ExpressJs(server_app.js)

var express, application, multer, upload;

express = require('express');
application = express();
multer  = require('multer');
upload = multer({dest: 'uploads/'}).single('myPhoto');

application.get('/photos', upload, function (request, response) {
  console.log(response.file);
  response.status(204).end();
});

application.listen(8080, function () {
  console.log('Example application listening on port 8080!');
});