详解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 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
详解js的作用域、预解析机制
Feb 05 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Vue.extend实现挂载到实例上的方法
May 01 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
深入array multisort排序原理的详解
2013/06/18 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python字符串连接方法分析
2016/04/12 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python实现弹跳小球
2019/05/13 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
股票投资建议书
2014/05/19 职场文书
大学生安全责任书
2014/07/25 职场文书
初一数学教学反思
2016/02/17 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技