cordova文件传输插件在ios模拟器中不起作用
我正在尝试在我的项目中使用相机插件和文件传输。 它们在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模拟器时出现问题。
有任何想法吗?
文件上传:Cordova文件传输插件+ ExpressJs Multer
下面的解决方案让我用iPhone相机拍照,然后将照片上传到NodeJS服务器。
@Kyokasuigetsu – 几乎放弃了使用Cordova文件传输插件的FILE_URI!
请注意,
options.fileKey = 'myPhoto'
和upload.single('myPhoto')
应该具有相同的值。 它引用文件上载表单的字段名称。
安装所需的插件和模块(从控制台)
> 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!'); });