vue项目打包成app无法使用input调用相机
问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片
解决方案:
1.利用HTML5 Plus的Camera调用相机
2.利用HTML5 Plus的IO来实现读取拍照所得的图片文件
3.使用base64上传图片
clickInputLoader() { let _this = this if (~navigator.userAgent.indexOf("Html5Plus")) { let plusReady = function(callback) { if (window.plus) { callback(); } else { document.addEventListener("plusready", callback); } }; plusReady(function() { let camera = plus.camera.getCamera(); // 调用相机 camera.captureImage( function(filePath) { plus.io.resolveLocalFileSystemURL( // 通过URL参数获取目录对象或文件对象 filePath, function(entry) { _this.lodingShow = true; let reader = null entry.file(function(file) { let sizeJudge = false; sizeJudge = _this.checkSize(file.size); if (sizeJudge === false) { return; } reader = new plus.io.FileReader(); // 文件系统中的读取文件对象,用于获取文件的内容 reader.onload = function(e) { } reader.readAsDataURL(file); reader.onloadend = function(e) { let dataBase = e.target.result; // 获取Base64,FileReader()返回 uploadImgBase64({ //调用上传接口 file:dataBase }) .then(res => { if (res.data.code === 200) { _this.lodingShow = false; _this.alertVal = "图片上传成功"; _this.showPluginAuto(); } else { _this.lodingShow = false; _this.alertVal = res.data.msg; _this.showPluginAuto(); } }) .catch(() => { _this.lodingShow = false; _this.alertVal = "图片上传失败!"; _this.showPluginAuto(); }); },function (e) { alert( e.message ); } ; }); reader.abort(); }, function(e) { plus.nativeUI.toast("读取拍照文件错误:" + e.message); } ); }, function() { alert("拍照失败"); } ); }); } },
具体使用方式查看文档:http://www.dcloud.io/docs/api/zh_cn/io.html