cordova文件传输插件不工作在ios模拟器 [英] cordova file transfer plugin not working in ios simulator
问题描述
我想在我的项目中使用相机插件和文件传输。他们在Android上工作正常，但是当我在ios模拟器测试时，当我尝试使用cordova文件传输插件上传照片时，我在服务器上得到一个空的请求体。
I'm trying to use the camera plugin and file transfer on my project. They work fine on android but when I tested on ios simulator, I'm getting an empty request body on the server when I try to upload a photo using the cordova file transfer plugin.
在下面的代码中， photo_url 是我从相机插件获得的响应。这包含我从图库中选择的照片的完整路径。这是我使用 console.log 时的值：
In the code below, the photo_url is the response that I get from the camera plugin. This contains the full path of the photo that I selected from the gallery. Here's the value that I got when I used 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 。
我试图寻找解决方案，我发现以下：
I tried looking for solutions and I found the following:
options.headers = {
Connection: "close"
};
options.chunkedMode = false;
我将其应用于现有代码，但仍然无法工作。我在服务器中获取的请求体仍然是一个空对象。
I applied it to my existing code but it still didn't work. The request body that I'm getting in the server is still an empty object.
I'm using an express server and multer to handle file uploads.
以下是服务器上的代码：
Here's the code on the server:
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模拟器。
Multer already handles the file upload, so all I have to do is write the code for instructing multer to change the destination directory, which is what I have above. When uploading files in android, it works fine. I get values for the request body. But on ios its empty. So I think the problem is either with ios simulator or the file transfer plugin has issues when working with ios simulator.
任何想法？
推荐答案
文件上传：Cordova文件传输插件+ ExpressJs Multer
然后将照片上传到NodeJS服务器。
File Upload: Cordova File Transfer Plugin + ExpressJs Multer
The solution below lets me take a photo with the iPhone camera, and then uploads the photo to a NodeJS server.
@Kyokasuigetsu - 几乎放弃了FILE_URI与Cordova的文件传输插件
@Kyokasuigetsu - almost gave up on FILE_URI with Cordova's File Transfer Plugin as well!
注意
options.fileKey ='myPhoto'和
upload.single（'myPhoto'）应具有相同的值。它指的是文件上传表单的字段名称。
Notice that
options.fileKey = 'myPhoto'andupload.single('myPhoto')should have the same value. It refers to the field name for the file upload form.
<!-- 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);
NodeJs / ExpressJs（server_app.js）
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!');
});
这篇关于cordova文件传输插件不工作在ios模拟器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
