詳解Vue調(diào)用手機相機和相冊以及上傳
更新時間:2019年05月05日 08:35:34 作者:HelloMyCodeWorld
這篇文章主要介紹了Vue調(diào)用手機相機及上傳,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
組件
<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:{ //調(diào)用相冊&相機 fileClick() { $('#upload_file').click(); }, //調(diào)用手機攝像頭并拍照 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調(diào)用手機相機及上傳詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
相關(guān)文章
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2023-03-03vue3+elementui-plus實現(xiàn)一個接口上傳多個文件功能
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)一個接口上傳多個文件,先使用element-plus寫好上傳組件,然后假設(shè)有個提交按鈕,點擊上傳文件請求接口,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-07-07使用elementUI table展開行內(nèi)嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue輪播組件實現(xiàn)$children和$parent 附帶好用的gif錄制工具
這篇文章主要介紹了vue輪播組件實現(xiàn),$children和$parent,附帶好用的gif錄制工具,需要的朋友可以參考下2019-09-09基于Vue2x實現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個全過程,包含發(fā)布到npm,構(gòu)建自己的npm包,供下載安裝使用的技巧,非常不錯,具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05