从 PhoneGap Cordova App 上传图片答案

【问题标题】：Uploading Picture From PhoneGap Cordova App从 PhoneGap Cordova App 上传图片
【发布时间】：2015-02-03 01:42:06
【问题描述】：

试图上传照片，但无法将文件数据发送到服务器。应用程序启动摄像头并向服务器发送 POST，但从未上传任何文件。

我已经创建了最简单的应用程序，可以在https://github.com/dustinb/Camera/blob/master/index.html 进行测试。当上传发生时，只有 452 字节发送到服务器。

73.3.252.133 - - [04/Dec/2014:23:55:11 +0000] "POST /upload HTTP/1.1" 200 452 "-" "Dalvik/1.4.0 (Linux; U; Android 2.3.4; ADR6400L Build/GRJ22)"

我看过很多这样的例子，但看不出有什么不同。我正在使用 build.phonegap.com 构建和安装

编辑：使用 tcpdump 我可以看到数据正在到达服务器，只是 PHP 中的 $_POST 或 $_FILES 变量中没有任何内容

    0x0030:  150c 34c5 504f 5354 202f 7570 6c6f 6164  ..4.POST./upload
    0x0040:  2048 5454 502f 312e 310d 0a43 6f6e 7465  .HTTP/1.1..Conte
    0x0050:  6e74 2d54 7970 653a 206d 756c 7469 7061  nt-Type:.multipa
    0x0060:  7274 2f66 6f72 6d2d 6461 7461 3b20 626f  rt/form-data;.bo
    0x0070:  756e 6461 7279 3d2b 2b2b 2b2b 0d0a 5573  undary=+++++..Us
    0x0080:  6572 2d41 6765 6e74 3a20 4461 6c76 696b  er-Agent:.Dalvik
    0x0090:  2f31 2e34 2e30 2028 4c69 6e75 783b 2055  /1.4.0.(Linux;.U
    0x00a0:  3b20 416e 6472 6f69 6420 322e 332e 343b  ;.Android.2.3.4;
    0x00b0:  2041 4452 3634 3030 4c20 4275 696c 642f  .ADR6400L.Build/
    0x00c0:  4752 4a32 3229 0d0a 486f 7374 3a20 7371  GRJ22)..Host:.sq
    0x00d0:  7561 7265 732e 726f 756e 6470 6f72 6368  uares.roundporch
    0x00e0:  2e63 6f6d 0d0a 436f 6e6e 6563 7469 6f6e  .com..Connection
    0x00f0:  3a20 4b65 6570 2d41 6c69 7665 0d0a 4163  :.Keep-Alive..Ac
    0x0100:  6365 7074 2d45 6e63 6f64 696e 673a 2067  cept-Encoding:.g
    0x0110:  7a69 700d 0a43 6f6e 7465 6e74 2d4c 656e  zip..Content-Len
    0x0120:  6774 683a 2032 3933 3530 0d0a 0d0a       gth:.29350....
    -- next packet --
    0x0000:  4500 05dc 617d 4000 3206 a8e9 4903 fc85  E...a}@.2...I...
    0x0010:  68cf 8a5d d68c 0050 aa2b ce30 13d2 95d7  h..]...P.+.0....
    0x0020:  8010 02da 80ec 0000 0101 080a 01be ac57  ...............W
    0x0030:  150c 34c5 ffd8 ffe1 0116 4578 6966 0000  ..4.......Exif..
    0x0040:  4949 2a00 0800 0000 0e00 3201 0200 1400  II*.......2.....

似乎问题在于 Content-Disposition 的 mime 边界和其他标头未发送。可以在发送 Content-Length 后的转储中看到 JPEG 数据立即发送，不使用 mime 边界。

【问题讨论】：

您的服务器是否已启动并能够从应用程序接收数据而没有任何问题，例如防火墙、代理等。另外，如果您使用任何 Web 服务上传图像，您可以单独测试一下吗
您的代码非常正确，我使用了类似的并且有效：参见我的示例stackoverflow.com/questions/27155646/…
你不能在没有应用程序的情况下上传图片 - 我的意思是如果你创建一个测试 webapp 来上传图片并查看差异。通过这种方式，至少您可以确定服务器/网络服务工作正常，现在问题出在移动应用程序（代码）上......这只是一个分离问题的想法
查看 tcpdump 我看到正在上传的数据（更新的问题），但没有 $_POST 或 $_FILES 数据。相同的 /upload 脚本适用于标准 Web 浏览器上传。与服务器端或电话差距如何编码 POST 数据不合作。
我注意到的一件事是多部分边界显示为 +++++.. 但从未使用过边界，FileTransfer 只是在请求正文中发送原始 jpeg 数据，没有边界信息。当我使用标准网络上传表单进行相同的转储时，请求具有名称的 mime 边界，文件名标题然后发送图像数据

标签： php android cordova mime

【解决方案1】：

发送前尝试编码网址。

ft.upload(imageURI, 
    encodeURI(serverURL + "/upload.php"),
function (e) {
    alert('success');
},function (e) {
    alert("failed");
},options);

【讨论】：

与 encodeURI 的结果相同。我看到我的问题是 FileTransfer 如何发送 POST 数据，即没有边界，如我更新的问题中所示。会不会是安卓版本的原因？
安卓版本不会有问题。在我最近的项目中，需要类似的上传功能。桌面网络应用程序能够在从移动设备上传时轻松上传图片，它有时可以工作，有时不能。我的个人 android 设备根本无法上传图片，但是另外两个设备 - Galaxy 和 iPhone 有时可以上传图片，但并非总是如此。所以我们在自己的办公室设置了另一台服务器来检查功能&它工作得很好。所以我们向客户展示，然后他们的网络团队做了一些事情，然后所有设备都能够轻松上传图片。

【解决方案2】：

在这里查看我的示例，希望对您有所帮助。

html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<!– WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 –>
<meta content=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
name="viewport">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<title>Camera Cordova Plugin</title>
</head>

<body>
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button><br>
<img id="image" src="" style="display:none;width:100%;">
<button onclick="upload();">Upload</button>
</body>
</html>

function upload() {
    var img = document.getElementById('image');
    var imageURI = img.src;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = new Object();
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(imageURI, "https://www.example.com/upload.php", win, fail,
        options);
}

function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

php

<?php
move_uploaded_file($_FILES["file"]["tmp_name"], '/path/to/file');

http://blog.revivalx.com/2014/07/12/upload-image-using-file-transfer-cordova-plugin-for-ios-and-android/

【讨论】：

你的 capturePhoto() 函数是在哪里定义的？
那个来自camera cordova插件，blog.revivalx.com/2014/05/03/…
我真的认为这与 FileTransfer 插件或设置有关。拍照没问题，它正在发送数据，只是 MIME 格式不正确
你可以在这里测试我的源代码，github.com/datomnurdin/com.revivalx.cordova.file-transfer

【解决方案3】：

尝试自己设置边界，将标题添加到您的FileUploadOptions

var headers={'Content-Type':'multipart/form-data; boundary=+++++'};
options.headers = headers;

【讨论】：

【解决方案4】：

问题在于使用了错误的文件传输插件。不知道我在哪里找到了其他插件或为什么使用它但不起作用

-    <gap:plugin name="com.chanthu.evri.gcs-file-transfer" version="1.0.0" />
+    <gap:plugin name="org.apache.cordova.file-trasfer" />

【讨论】：