组件

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