html5打包成app不能拍照,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("拍照失败");

}

);

});

}

html5打包成app不能拍照,vue项目打包成app无法使用input调用相机相关推荐

electron 打包 php,electron 将现有vue项目改成支持electron桌面端应用
vue过滤器和组件化 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name=" ...
使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
vue项目打包App
本地的vue项目打包成App.这里以Hbuilder为例.首选命令行进入项目的目录执行 npm run build 打包成功之后再项目下回生成一个dlist 文件夹.在Hbuilder中导入dlis ...
Hbuilder将vue项目打包为app（具体步骤和注意点）
Hbuilder将vue项目打包为app(具体步骤和注意点) 打包配置进行打包注意事项打包配置 1.打开Hbuider,点击左上角文件,点击新建,然后点击项目.项目类型要选择5+App,项目名称 ...
Vue项目打包移动端App(App打包教程)，简便直接
一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录首先可以看到dist目录的 ...
教你如何3分钟把VUE项目打包成apk，真的只要3分钟
前提准备使用vue-cli3搭建的项目工具 HBuilder X,他的图标长这个样子,点击下载做前端的大多数小伙伴们都应该知道,使用起来轻巧.急速,但是他主要是针对于VUE生态打造的,相对于 v ...
vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成自己vue项目打包好的dist文件中的index.html,输入打包e ...
vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...

html5打包成app不能拍照,vue项目打包成app无法使用input调用相机

html5打包成app不能拍照,vue项目打包成app无法使用input调用相机相关推荐

最新文章

热门文章