從PhoneGap上傳圖片Cordova App

試圖獲取照片上傳但無法獲取文件數據到服務器。該應用程序調出相機並執行POST服務器，但從未有任何文件上傳。從PhoneGap上傳圖片Cordova App

我創建了最簡單的應用程序，我可以測試這個在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的，我可以看到的數據也越來越到服務器剛剛在$ _ POST或$ _FILES變量沒有在PHP

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邊界。

來源

2014-12-05 Dustin Butler

是您的服務器並能夠接收來自應用程序的數據，而不象防火牆，代理服務器等，另外，如果你使用任何任何問題Webservice上傳圖像，你可以單獨測試 – AAhad 2014-12-05 03:36:03

你的代碼是非常正確的，我用類似的，它的工作：看我的例子http://stackoverflow.com/questions/27155646/cordova-upload-image-not-working-after -taking-picutre/27165215＃27165215 – AAhad 2014-12-05 03:41:23

無法在沒有應用程序的情況下上傳圖片 - 我的意思是如果您創建測試webapp來上傳圖片並查看差異。這樣至少你可以肯定，服務器/ web服務工作正常，現在的問題是與移動應用程序（代碼）...這只是一個想法來分開問題 – AAhad 2014-12-05 03:43:56

問題是使用了錯誤的File Transfer插件。不知道在那裏我找到了其他插件或爲什麼它被使用，但不工作

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

來源

2014-12-13 21:54:22

嘗試編碼在發送之前的url。

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

來源

2014-12-05 04:50:35 AAhad

與encodeURI的結果相同。我看到我的問題是FileTransfer如何發送POST數據，即沒有我的更新問題中顯示的邊界。這可能是由於Android的版本？ – 2014-12-05 20:14:41

Android版本不會成爲問題。在我最近的項目中，需要類似的上傳功能。桌面Web應用程序能夠輕鬆上傳圖片，而從移動設備上傳它有時可以正常工作，有時不會。我的個人Android設備根本無法上傳圖片，但是其他兩個設備 - Galaxy和iPhone能夠有時上傳Pic，所以我們在自己的辦公室安裝了另一臺服務器來檢查功能，並且它工作得非常好。我們向客戶展示，然後他們的網絡團隊做了一些事情，然後所有設備都能夠輕鬆上傳Pics。 – AAhad 2014-12-06 07:42:04

看看我的樣品在這裏，我希望它有幫助。

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/

來源

2014-12-08 10:13:53

您的capturePhoto（）函數在哪裏定義？ – 2014-12-08 23:11:40

那個來自相機科爾多瓦插件，http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/ – 2014-12-09 02:21:07

我真的認爲這是與FileTransfer插件或設置。拍照是好的，它發送的數據，只是沒有在正確的MIME格式 – 2014-12-09 02:43:48

嘗試自己添加標題的邊界設置爲您FileUploadOptions

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

來源

2014-12-09 10:59:25 jcesarmobile

從PhoneGap上傳圖片Cordova App

回答

相關問題