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

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

发布于 2020-7-7|

复制链接

摘记: 组件

```xhtml

组件

```xhtml

-->

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

```

javaScript代码

```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

```

vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传相关推荐

vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
vue 变量定义对象_详解Vue 全局变量，局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
vue传递数组对象_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue warning如何去掉_详解 vue 组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...

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

vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传相关推荐

最新文章

热门文章