欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解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ù)庫

    手把手帶你使用vue+node作后端連接數(shù)據(jù)庫

    為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue cli3 配置proxy代理無效的解決

    vue cli3 配置proxy代理無效的解決

    今天小編就為大家分享一篇vue cli3 配置proxy代理無效的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 快速解決vue在ios端下點擊響應(yīng)延時的問題

    快速解決vue在ios端下點擊響應(yīng)延時的問題

    今天小編就為大家分享一篇快速解決vue在ios端下點擊響應(yīng)延時的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue.js實現(xiàn)簡單計時器應(yīng)用

    Vue.js實現(xiàn)簡單計時器應(yīng)用

    這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)簡單計時器應(yīng)用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • vue3+elementui-plus實現(xiàn)一個接口上傳多個文件功能

    vue3+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問題

    這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue輪播組件實現(xiàn)$children和$parent 附帶好用的gif錄制工具

    vue輪播組件實現(xiàn)$children和$parent 附帶好用的gif錄制工具

    這篇文章主要介紹了vue輪播組件實現(xiàn),$children和$parent,附帶好用的gif錄制工具,需要的朋友可以參考下
    2019-09-09
  • 基于Vue2x實現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能

    基于Vue2x實現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能

    本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個全過程,包含發(fā)布到npm,構(gòu)建自己的npm包,供下載安裝使用的技巧,非常不錯,具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-05-05
  • 可能是vue中使用axios最詳細教程

    可能是vue中使用axios最詳細教程

    Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細教程的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • vue中v-html妙用及空白行消除方式

    vue中v-html妙用及空白行消除方式

    這篇文章主要介紹了vue中v-html妙用及空白行消除方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04

最新評論