vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
組件
選中{{imgList.length}}張文件，共{{bytesToSize(this.size)}}
javaScript代碼
export default {
name: "cameras-and-albums",
data(){
return{
imgList: [],
datas: new FormData(),
files:0,
size:0
}
},
methods:{
//調用相冊&相機
fileClick() {
$('#upload_file').click();
},
//調用手機攝像頭并拍照
getImage() {
let cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);
});
}, function(e) {
}, {
filter: 'image'
});
},
//從相冊選擇照片
galleryImgs() {
plus.gallery.pick(function(e) {
let name = e.substr(e.lastIndexOf('/') + 1);
compressImage(e,name);
}, function(e) {
}, {
filter: "image"
});
},
//點擊事件，彈出選擇攝像頭和相冊的選項
showActionSheet() {
let bts = [{
title: "拍照"
}, {
title: "從相冊選擇"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
this.getImage();
} else if (e.index == 2) {
this.galleryImgs();
}
}
);
},
fileChange(el) {
this.files=$("#upload_file").get(0).files;
console.log(this.files.length);
for(let i=0;i
this.datas.append("file",this.files[i]);
}
this.show1=false;
console.log(typeof this.files);
console.log(this.files);
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = ''
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判斷是否為文件夾
if (files[i].type != '') {
this.fileAdd(files[i]);
} else {
//文件夾處理
this.folders(fileList.items[i]);
}
}
},
//文件夾處理
folders(files) {
let _this = this;
//判斷是否為原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function (file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
})
},
fileAdd(file) {
//總大小
this.size = this.size + file.size;
//判斷是否為圖片文件
if (file.type.indexOf('image') == -1) {
file.src = 'wenjian.png';
this.imgList.push({
file
});
} else {
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
}
},
fileDel(index) {
this.size = this.size - this.imgList[index].file.size;//總大小
this.imgList.splice(index, 1);
},
bytesToSize(bytes) {
if (bytes === 0){
return '0 B';
}
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
},
dragenter(el) {
el.stopPropagation();
el.preventDefault();
},
dragover(el) {
el.stopPropagation();
el.preventDefault();
},
drop(el) {
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer);
},
shows(et,tx){
this.strut=et;
this.txt=tx;
},
handleClick(){
this.$store.commit('add')
},
},
}
以上所述是小編給大家介紹的Vue調用手機相機及上傳詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對我們網站的支持！
本文標題: 詳解Vue調用手機相機和相冊以及上傳
本文地址: http://www.cppcns.com/wangluo/javascript/258284.html
總結
以上是生活随笔為你收集整理的vue调用手机相机相册_详解Vue调用手机相机和相册以及上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php加mySQL制作网络硬盘_PHP实
- 下一篇： html5倒计时秒杀怎么做,vue 设