离子信息 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