我正在尝试在我的项目中使用相机插件和文件传输。它们在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模拟器时出现问题。
有什么想法吗?
答案 0 :(得分:0)
下面的解决方案让我可以用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;
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);
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!');
});