app 調用手機相機、相冊完成圖片上傳

送您一個最高1888元的阿里雲大禮包，快來領取吧~

1.調用相機相冊

//調用相機 function getCamera(callBack) { var camera = plus.camera.getCamera(); camera.captureImage(function(path) { callBack(path); }, function(error) { console.log(error.message); }, { filename: "_doc/camera/", index: 1 }) }

2.調用後臺上傳接口

/*調用後臺上傳接口*/ function uploadImage(path, callBack) { var task = plus.uploader.createUpload(API_CONFIG.upload, { method: "POST" }, function(t, status) { console.log(status); if(status == 200) { var result = JSON.parse(t.responseText); callBack(result); } else { plus.nativeUI.toast('圖片上傳失敗'); } } ); task.addFile(path, { key: "files" }); task.start(); }

 

3.使用h5 壓縮上傳的圖片

/** * h5+壓縮 */ function H5Zip(fileData) { plus.zip.compressImage({ src: fileData.path, dst: "_downloads/camera" + fileData.path.substring(fileData.path.lastIndexOf('/')), overwrite: true, format: 'jpg', quality: 20 }, function(event) { plus.nativeUI.showWaiting("請稍後..."); //壓縮圖片成功 uploadImage(event.target, function(data) { console.log(JSON.stringify(data)); if(null != data) { plus.nativeUI.closeWaiting(); if(data.code == "1000") { console.log(data.fillPath); var newNode = document.createElement("li"); newNode.setAttribute("class", "mui-table-view-cell mui-media mui-col-xs-4"); newNode.innerHTML = '<a href="#">' + '<img data-preview-src="" data-preview-group="2" class="mui-media-object" src="' + data.fillPath + '" style="width:100px;height:100px;" >' + '<img class="del" src="../../img/project/cha.png" width="20px" />' + '<input type="hidden" name="fileName" value="' + data.subPath + '"> ' + '</a>'; document.getElementById('photoList').appendChild(newNode); photosCount++; imgPaths.push(event.target); } else { mui.toast("數據異常"); } } else { mui.toast('圖片上傳失敗') plus.nativeUI.closeWaiting(); } }); }, function(e) { plus.nativeUI.toast("操做失敗"); }); }

4.點擊上傳圖片調用的方法

//圖片上傳 function addImg() { if(photosCount >= 9) { mui.toast('最多選取9張圖片'); return; } plus.nativeUI.actionSheet({ cancel: "取消", buttons: [{ title: "從相冊選擇" }, { title: "拍照" }] }, function(event) { if(event.index == 1) { plus.gallery.pick(function(e) { for(var i in e.files) { var path = e.files[i]; plus.io.resolveLocalFileSystemURL(path, function(entry) { // 可經過entry對象操做test.html文件 entry.file(function(file) { var fileData = {}; fileData.name = file.name; fileData.path = "file://" + file.fullPath; H5Zip(fileData); //壓縮圖片並上傳 }); }, function(e) { mui.toast("Resolve file URL failed: " + e.message); }); } }, function() { plus.nativeUI.toast('取消選擇圖片'); }, { filter: 'image', multiple: true, maximum: 9 - photosCount, system: false, onmaxed: function() { plus.nativeUI.toast('最多隻能選取9張圖片'); } }); } else if(event.index == 2) { console.log(22); getCamera(function(path) { plus.io.resolveLocalFileSystemURL(path, function(entry) { // 可經過entry對象操做test.html文件 entry.file(function(file) { var fileData = {}; fileData.name = file.name; fileData.path = "file://" + file.fullPath; console.log(JSON.stringify(fileData)); H5Zip(fileData); //壓縮圖片並上傳 }); }, function(e) { mui.toast("Resolve file URL failed: " + e.message); }); }); } }); }

5.效果圖

 

送您一個最高1888元的阿里雲大禮包，快來領取吧~