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元的阿里云大礼包，快来领取吧~