详解Vue调用手机相机和相册以及上传
程序员文章站
2023-12-02 22:55:46
组件
组件
<template>
<div>
<input id="upload_file" type="file" style="display: none;" accept='image/*' name="file" @change="filechange($event)"/>
<div class="image-item space" @click="showactionsheet()">
<div class="image-up"></div>
</div>
<div class="upload_warp">
<div class="upload_warp_img">
<div class="upload_warp_img_div" v-for="(item,index) in imglist">
<div class="upload_warp_img_div_top">
<img src="http://114.115.162.39/static/image/x.png" class="upload_warp_img_div_del" @click="filedel(index)">
</div>
<img :src="item.file.src" style="display: inline-block;">
</div>
<div class="upload_warp_left" id="upload_warp_left" @click="fileclick()" v-if="this.imglist.length < 6">
<!--<img src="../assets/upload.png">-->
<img src="../assets/images/添加图片.png" class="imgs"/>
</div>
</div>
</div>
<div class="upload_warp_text">
<span>选中{{imglist.length}}张文件，共{{bytestosize(this.size)}}</span>
</div>
</div>
</template>
javascript代码
<script type="text/ecmascript-6">
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.files.length;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')
},
},
}
</script>
以上所述是小编给大家介绍的vue调用手机相机及上传详解整合，希望对大家有所帮助