首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

Cordova/PhoneGap 實現拍照與文件上傳完整指南

     編輯:程式設計綜合問答

前置條件

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 對象。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved