详解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 相关文章推荐
JS实现清除指定cookies的方法
Sep 20 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
JS 创建对象的模式实例小结
Apr 28 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
中国收音机工业发展史
2021/03/02 无线电
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP异常处理Exception类
2015/12/11 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python实现多行注释的另类方法
2014/08/22 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python列表的增删改查实例代码
2018/01/30 Python
python创建文件备份的脚本
2018/09/11 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
2013届毕业生求职信范文
2013/11/20 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
二年级学生评语大全
2014/04/23 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
Redis三种集群模式详解
2021/10/05 Redis