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

组件

x.png

%E6%B7%BB%E5%8A%A0%E5%9B%BE%E7%89%87.png

选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}}

javaScript代码

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.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')

},

},

}

以上所述是小编给大家介绍的Vue调用手机相机及上传详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

本文标题: 详解Vue调用手机相机和相册以及上传

本文地址: http://www.cppcns.com/wangluo/javascript/258284.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/345157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在mysql中删除表中字段_MySQL中的表中增加删除字段

1.增加一个字段alter table user表 add COLUMN new1字段 VARCHAR(20) NOT NULL DEFAULT 0; //增加一个字段,VARCHERA 20 , 不为空,默认值是 0//增加多个alter table user表add COLUMN new1字段 VARCHAR(20) NOT NULL DEFAULT 0,add COLUMN new2字段 VARCHAR(20) NOT NULL…

红旗linux mysql_恢复 - 红旗Linux案例精选:Amanda集中备份实例详细讲解_数据库技术_Linux公社-Linux系统门户网站...

五、恢复假定我们需要恢复cp3上一些丢失的数据&#xff0c;首先用amandabackup帐号登录cp2机器&#xff0c;创建/etc/amanda/amanda-client.conf文件&#xff0c;内容如下&#xff1a;## amanda.conf - sample Amanda client configuration file.## This file normally goes in…

python 语音识别机器人控制系统_python实现百度语音识别api

本文实例为大家分享了python实现百度语音识别的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下详细百度语音识别api文档先下载python用SDK&#xff0c;可以用python setup.py install安装 # 引入Speech SDKfrom aip import AipSpeech# 定义常量APP_ID 你的 App IDAP…

linuxpip安装python包_Windows+Linux安装Python包管理工具pip

WindowsLinux安装Python包管理工具pipWindows安装Python包管理工具pippip是一个Python包管理工具&#xff0c;主要是用于安装PyPI上的软件包&#xff0c;可以替代easy_install工具。一、前期准备首先确认windows机器上面是否已经安装好了python。在cmd中输入python --version和…

mysql 深胡_Mysql胡说八道

mysql索引今天看了一些关于MySQL相关的东西&#xff0c;来做一些碎碎念&#xff0c;写这些可能只是觉得自己看东西老爱忘23333.先来看一组MySQL数据&#xff0c;如图我们要查看最后id11的数据&#xff0c;如果我们不加索引的话会怎样呢&#xff1f;他会一条一条的比对&#xff…

python3.1.1_python 3.1.1 with--enable shared:将不会构建任何扩展

摘要:使用--enable shared在RHEL 5.3 64位上构建Python3.1无法编译所有扩展。建筑“正常”工作良好,没有任何问题。请注意这个问题似乎模糊了编程和系统管理之间的界限。但是,我相信因为它必须直接处理操作系统问题和编程问题,所以我会在stackoverflow和serverfault上交叉发布它…

java的case_java中的switch case语句使用详解

java中的switch case语句switch-case语句格式如下&#xff1a;switch(变量){case 变量值1://;break;case 变量值2://...;break;...case default://...;break;}swtich()变量类型只能是int、short、char、byte和enum类型(JDK 1.7 之后&#xff0c;类型也可以是String了)。当进行c…

java public main_实例分析Java中public static void main(String args[])是什么意思

本文实例讲述了Java中public static void main(String args[])的来龙去脉。分享给大家供大家参考&#xff0c;具体如下&#xff1a;public static void main(String[] args)这绝对不是凭空想出来的&#xff0c;也不是没有道理的死规定&#xff0c;而是java程序执行的需要。jvm在…

打印矩阵 java_【Java】 剑指offer(29) 顺时针打印矩阵

本文参考自《剑指offer》一书&#xff0c;代码采用Java语言。题目输入一个矩阵&#xff0c;按照从外向里以顺时针的顺序依次打印出每一个数字。思路每次打印矩阵最外面的一圈(用方法printMatrixInCircle()表示)&#xff0c;每次都是这个操作&#xff0c;所以可以采用递归。每次…

具有JDK 12精简数字格式的自定义精简数字模式

帖子“ 紧凑数字格式到JDK 12 ”已经成为java subreddit线程上讨论的主题 。 在那个线程中表达的与紧凑数字格式表示有关的问题涉及显示的精度数字和显示的紧凑数字模式。 可以通过使用CompactNumberFormat.setMinimumFractionDigits(int)来解决精度数字问题&#xff0c;该方法…

【渝粤题库】陕西师范大学100071教育学作业(高起本)

单选题 1、中小学为实现教育目标&#xff0c;与课堂教学相配合&#xff0c;在课堂教学以外对学生身心实施多种影响的正规教育活动&#xff0c;就是( ) A、课堂作业 B、课外作业 C课外活动 D、课外参观 2、学生的行为规范、公民意识、劳动态度等属于( ) A、心理素质 B、生理素质…

java 面试for循环_一个基础的for循环面试题

下面的这段程序主要考察的就是for循环的基础&#xff0c;输出什么&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;1、 public class test {2、3、 /**4、 * param args5、 */6、 public static void main(String[] args) {7、 // TODO Auto-generat…

java浏览文件夹_一个用java实现简单的文件浏览器

[java]代码库import java.awt.*;import java.awt.event.*;import java.net.URL;import javax.swing.*;//文件浏览器public class HTTPBrowserDemo extends JFrame {private static final long serialVersionUID -5794029080886644211L;JTextField jtfAddress; // 输入文件地址…

【渝粤题库】陕西师范大学151203 初级会计学作业(笔试题型)

《初级会计学》作业 一、单项选择 1&#xff0e;下列会计要素&#xff0c;属于静态要素的有 &#xff08; &#xff09; A&#xff0e;负债 B&#xff0e;收入 C&#xff0e;费用 D&#xff0e;利润 2&#xff0e; 下列项目中&#xff0c;属于流动负债的有 &#xff08; &#…

【渝粤题库】陕西师范大学152208 公共危机管理

陕西师范大学 内 部 题 库 教育 &#xff08;yuyueshool&#xff09; 编制 陕西师范大学 内 部 题 库 教育 &#xff08;yuyueshool&#xff09; 编制 陕西师范大学 内 部 题 库 教育 &#xff08;yuyueshool&#xff09; 编制 陕西师范大学 内 部 题 库 教育 &#xf…

【渝粤题库】陕西师范大学164109人力资源管理 作业(高起专)

《人力资源管理》作业 一、单选题 在企业成长过程中&#xff0c;&#xff08; &#xff09;因素发挥着核心作用。 A 技术 B资金 C市场 D人力资源现代人力资源管理强调&#xff08; &#xff09;。 A 以 “事为中心” B 将员工视为负担与成本 C强调“控制” D强调对人的开发和管…

java快速排序算法_JAVA版排序算法之快速排序示例

本文实例讲述了JAVA快速排序实现方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;package com.ethan.sort.java;import java.util.Arrays;import java.util.Iterator;import java.util.LinkedList;import java.util.List;public class QuickSort {public static &g…

java奥运会安排赛程问题_记录奥运-当今五大Java记录框架之间的竞赛

java奥运会安排赛程问题开发人员&#xff1a;Takipi会告诉您何时新代码在生产中中断– Log4J vs SLF4J简单vs Logback vs Java Util日志记录vs LOG4J2 日志记录实际上是每个服务器端应用程序中古老且固有的部分。 这是应用程序以持久且可读的方式输出实时状态的主要方法。 某些…

【渝粤题库】陕西师范大学165203 社会保险学 作业(专升本)

《社会保险学》作业 一、单选题 1、劳动者参加&#xff08;&#xff09;不需要缴纳任何保险费&#xff0c;而且享受待遇不受年龄、工龄、缴费年限、性别等条件的限制。 A、养老保险 B、医疗保险 C、工伤保险 D、失业保险1948年正式宣 2、保障社会安全的最后一道防线是&#xff…

【渝粤题库】陕西师范大学189202 品牌管理 作业(专升本)

一、名词解释 1、商标 2、品牌个性 3、品牌接触点 4、品质认知 5、品牌 6、品牌联想 7、品牌联合 8、品牌经理制 9、品牌形象 10、品牌杠杆力 11、品牌审计 12、投射法 13、品牌保护 二、 选择填空 A. 消费者 B. 体验 C.品牌定位 D. 品牌标识 E.反比 F. 正比 G.伞型品牌策略 H.…