前置條件
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer # 已棄用,建議用 XMLHttpRequest/Fetch
cordova plugin add cordova-plugin-whitelist
拍照代碼
function capturePhoto() {
navigator.camera.getPicture(uploadPhoto, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI, // 返回文件 URI
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
correctOrientation: true // 修正旋轉
});
}
function onFail(message) {
alert('拍照失敗: ' + message);
}
上傳代碼(現代 Fetch + FormData)
function uploadPhoto(fileUri) {
window.resolveLocalFileSystemURL(fileUri, function(fileEntry) {
fileEntry.file(function(file) {
var formData = new FormData();
formData.append('file', file, 'photo_' + Date.now() + '.jpg');
// 可追加其他字段
// formData.append('userId', getUserId());
fetch('https://your-api.com/upload', {
method: 'POST',
body: formData,
// headers: { 'Authorization': 'Bearer ' + token } // 若需認證
})
.then(response => response.json())
.then(data => alert('上傳成功: ' + JSON.stringify(data)))
.catch(err => alert('上傳失敗: ' + err));
});
}, onFail);
}
舊版 FileTransfer 寫法(維護舊項目參考)
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileUri.substr(fileUri.lastIndexOf('/')+1);
options.mimeType = "image/jpeg";
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(fileUri, encodeURI("https://your-api.com/upload"),
function(r) { alert("成功: " + r.response); },
function(e) { alert("失敗: " + e.code); },
options);
Android 10+ 存儲權限適配
<!-- config.xml -->
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" />
<!-- AndroidManifest.xml 自動注入 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
iOS Info.plist 必備
<key>NSCameraUsageDescription</key><string>需要訪問相機拍照</string>
<key>NSPhotoLibraryUsageDescription</key><string>需要讀取相冊選擇圖片</string>
<key>NSPhotoLibraryAddUsageDescription</key><string>需要保存圖片到相冊</string>
cordova-plugin-file-transfer 已歸檔,**新項目請直接用 Fetch/XHR + FormData**,標準 Web API、無依賴、支持進度事件(配合 xhr.upload.onprogress)。Cordova 只是橋接原生文件 URI 到 Blob/File 對象。