详解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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
详解JS数值Number类型
Feb 07 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
vue动态绑定style样式
Apr 20 Vue.js
原生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
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
高校十八大报告感想
2014/01/27 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
药剂专业自荐书
2014/06/20 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2016新年晚会开场白
2015/12/03 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS