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

作者:HelloMyCodeWorld 时间:2024-04-27 16:13:47 

组件


<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调用手机相机及上传详解整合网站的支持!

来源:https://blog.csdn.net/z15877395281/article/details/79291099

标签:Vue,相机,上传
0
投稿

猜你喜欢

  • 微信小程序开发之组件设计规范

    2024-04-18 09:35:15
  • python中前缀运算符 *和 **的用法示例详解

    2022-05-19 08:41:31
  • ORACLE11g随RHEL5系统自动启动与关闭的设置方法

    2009-08-31 12:43:00
  • JavaScript中的ArrayBuffer详细介绍

    2024-04-19 11:02:13
  • python教程十行代码教你语音转文字QQ微信聊天

    2024-01-03 09:06:54
  • sql 查询记录数结果集某个区间内记录

    2023-07-09 08:25:01
  • 分享vim python缩进等一些配置

    2022-09-28 00:12:55
  • 使用Python和xlwt向Excel文件中写入中文的实例

    2023-08-27 19:18:08
  • Python批量对word文档进行操作步骤

    2022-07-24 03:37:36
  • python 异常捕获详解流程

    2022-06-12 15:31:04
  • pycharm部署django项目到云服务器的详细流程

    2021-05-27 23:32:19
  • Python requests模块安装及使用教程图解

    2022-08-10 15:29:45
  • sql处理数据库锁的存储过程分享

    2023-07-05 18:03:25
  • google 的设计原则和LOGO手绘

    2008-05-20 12:16:00
  • python中统计相同字符的个数方法实例

    2021-04-21 00:28:58
  • 总结python多进程multiprocessing的相关知识

    2022-12-04 00:17:57
  • Numpy如何检查数组全为零的几种方法

    2023-05-16 12:00:25
  • Python实现双人五子棋对局

    2022-12-26 04:41:39
  • python 统计list中各个元素出现的次数的几种方法

    2022-12-09 10:04:01
  • 一文详解如何用GPU来运行Python代码

    2022-02-26 17:49:30
  • asp之家 网络编程 m.aspxhome.com