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


Posted in Javascript onMay 05, 2019

组件

<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调用手机相机及上传详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
JS实现密码框效果
Sep 10 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 #Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
node Buffer缓存区常见操作示例
May 04 #Javascript
JS实现checkbox互斥(单选)功能示例
May 04 #Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
微信小程序实现判断是分享到群还是个人功能示例
May 03 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
详解Layer弹出层样式
2017/08/21 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
node.js到底要不要加分号浅析
2018/07/11 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python绘制3D图形
2018/05/03 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
Python如何实现单例模式
2016/06/03 面试题
办公设备采购方案
2014/03/16 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
委托书格式
2014/08/01 职场文书
办护照工作证明
2014/10/01 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
学生个人评语大全
2015/01/04 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏