vue移动端获取本地相机和相册

//页面<div class="uploadFile"><!-- ul、li标签用于展示从本地添加的预览图片 --><ul v-show="uploadImg.length != 0"><li v-for="(item, index) in uploadImg" :key="index" class="addPic"><img :src="item" style="width: 100px; height: 100px" /></li></ul><inputtype="file"id="file"accept="image/*"@change="getPicture($event)"/><button @click="callFile" v-show="showInputImg">+</button></div>//js
methods:{getPicture(e) {//预览图片let src = window.URL.createObjectURL(e.target.files[0]);this.uploadImg.push(src);//将图片文件转化成base64格式图片var reader = new FileReader();reader.readAsDataURL(e.target.files[0]);reader.onload = (e) => {let bes = reader.result.split(",")[1];console.log(bes);this.base64.push(bes);};// console.log(reader.readAsDataURL(e.target.files[0]));},callFile() {//点击添加图片按钮，触发type:"file"的input标签let fileDom = document.querySelector("#file");fileDom.click();},
}
//css
.uploadFile {display: flex;height: 120px;line-height: 120px;padding: 15px 0 0px 30px;overflow: hidden;input{display: none;//隐藏样式 默认的样式}
}
.uploadFile ul {margin: 0;display: flex;
}
.uploadFile ul li {margin-right: 10px;
}
.uploadFile .addPic img {height: 100px;width: 100px;
}
.uploadFile button {height: 100px;width: 100px;font-size: 50px;border: none;color: rgb(182, 182, 182);background-color: rgb(243, 243, 243);
}

vue移动端获取本地相机和相册相关推荐

Vue+Element-UI 上传图片，打开相机，相册
Vue+Element-UI 上传图片,打开相机,相册 Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是 ...
Ajax怎么获取data为集合的值,vue，ajax获取本地的json文件，赋值后，computed和mounted里访问不到重新赋值后的listDatas...
ajax获取本地的json文件,取到数据之后赋值给data的listDatas,view页面更新了,但是computed和mounted里访问不到重新赋值后的listDatas,除了在$get()里能 ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...
vue移动端获取定位_vue手机移动端城市定位和选择代码
特效详情: vue手机移动端城市定位和选择代码,默认获取我的当前所在城市定位,可自定义更换选择城市,带城市列表首字母导航功能.请在手机端查看演示,电脑端无法选择. js代码 var app = new ...
云豹app直播源码Android 端获取相册图片功能的具体实现教程
app直播源码开发时,关于动态功能的实现,通常采用类似于朋友圈式图文+视频模式,这就需要通过访问手机相册获取用户图片进行下一步操作,接下来就请跟随小编一起,从app直播源码角度探究云豹直播系统在这个功 ...
iOS 获取本地相册图片或视频
1.先判断iOS 相机相册的权限检测相关链接 https://www.jianshu.com/p/8a944534e0ee 2.iOS 获取本地相册图片 iOS 获取本地相册图片一 iOS 获取本地 ...
vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例
下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...
//获取本地IP地址和对端IP地址
1 //获取本地IP地址 2 CHAR * GetLocalIpAdrr(int fd) 3 { 4 struct sockaddr_in stHost; 5 memset(&stHost, ...
iOS 从相机或相册获取图片并裁剪
/load user image - (void)UesrImageClicked { UIActionSheet *sheet; // 判断是否支持相机 if([UIImagePickerContr ...

vue移动端获取本地相机和相册

vue移动端获取本地相机和相册相关推荐

最新文章

热门文章