当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解Vue调用手机相机和相册以及上传

详解Vue调用手机相机和相册以及上传

2019年07月20日  | 移动技术网IT编程  | 我要评论

天使逛地狱被各种恶魔h的图片,广告设计实习报告,实用

组件

<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调用手机相机及上传详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网