問題描述:打包成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
