FileTransfer插件不将Image文件发送到服务器

时间:2018-06-18 06:18:13

标签: node.js ionic-framework ionic3 file-transfer multer

离子信息 cli包:(C:\ Program Files \ nodejs \ node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全球套餐:

cordova (Cordova CLI) : 8.0.0

本地包裹:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

系统:

Node : v8.9.4
npm  : 5.6.0
OS   : Windows 7

FileTransfer插件不将图像发送到服务器。日志显示正在传输的文件的确切详细信息。但是当在服务器上接收到node.js时,文件为空。在服务器端,我使用node.js表达与mutler接收文件。

相关代码 FileTransfer已编译代码:

public presentActionSheet()
{
  let actionSheet = this.actionSheetCtrl.create(
    {
      title : 'select Image source',
      buttons :[
        {
          text : 'Load from Gallery',
          handler:()=> {
             this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text : 'Use Camera',
          handler:()=> {
             this.takePicture(this.camera.PictureSourceType.CAMERA);
          } 
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    }
  );
  actionSheet.present();
}

public takePicture(sourceType)
{
    //create options for the camera Dialog
  var options={
  quality:100,
  sourceType: sourceType,
  //destinationType : this.camera.DestinationType.DATA_URL,
  saveToPhotoAlbum : false,
  correctOrientation: true
  };

  this.camera.getPicture(options).then((imagePath) => {
  // Special handling for Android library
  if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
     .then(filePath => {
        let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
        let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        console.log("cuurent name and correct path :",currentName,correctPath);
        this.uploadImage(currentName,correctPath);
      });
  } else {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    console.log("cuurent name and correct path :",currentName,correctPath);
    this.uploadImage(currentName,correctPath);
    }
    return imagePath;
  }, (err) => {
  this.showLoading();
  this.presentToast('Error while selecting image.');
  });
} 

//Uploading image to server
public uploadImage(imageName,imagePath) {

// Destination URL
  var url =  this.url + "Image";

// File for Upload
  var targetPath = imagePath;

// File name only
var filename = imageName;

  var options = {
   fileKey: "Image",
    fileName: filename,
    chunkedMode: false,
    mimeType: "image/form-data",
    httpMethod: 'POST'
    };

    console.log("URL to load the file : ",url)
    console.log("File to be uploaded : ",filename)
    console.log("target path : ", targetPath)

  const fileTransfer: TransferObject = this.transfer.create();
  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();

// Use the FileTransfer to upload the image
  fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Image succesful uploaded.');
  }, err => {
    this.loading.dismissAll()
    this.presentToast('Error while uploading file.');
  });
}

在控制台中,我将以下详细信息作为日志。

console.log:加载文件的网址:http://192.168.3.77:3000/Users/Image

console.log:要上传的文件:1529295784633.jpg

console.log:target path:file:///storage/emulated/0/Android/data/io.ionic.devapp/cache/

提供旁边代码:

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
        cb(null,  Date.now() + '.jpg');
    }
  });

//Image fetching module Path,still in testing 
router.post('/Image', function (req, res, next) {
    var upload = multer({ storage: storage }).single('Image');
        upload(req,res,function(err){
            if(err){
                console.log("reques body : ",req.body)
                console.log("request file : ",req.file)
                var obj = {status : 'failed',
                message : 'Error while loading image Capture' ,
                error :   err
                }
                return res.status(200).json(obj)
            } else {
                console.log("reques body : ",req.body)
                console.log("request file : ",req.file)
                var onlyPath = require('path').dirname(process.mainModule.filename)
                var obj = {status : 'success',
                message : 'Image  loaded successfully' ,
                path :   onlyPath +"\\"+ req.file.path
                }
                return res.status(200).json(obj)
            }
        })    

});

使用邮递员加载图像时,图像正在服务器端正确加载。但是使用离子文件传输加载时,我在传输时在服务器端变为空。

服务器端收到的控制台日志如下:

请求机构:

对象{} 请求文件:undefined

0 个答案:

没有答案