Input输入框调用摄像机

<input type="file" class="input" accept="image/jpg, image/jpeg" capture="camera">

1   限制文件类型accept="" accept属性必须用“image/*”accept表示,直接打开系统 文件目录。

2 capture捕获系统默认的设备 camera--照相机;camcorder--摄像机;microphone--录 音。

3 multiple 支持多选 加上multiple后,capture就没啥用了,因为multiple是专门用 来支持多选的。

获取上传的对象

<input type="file" @change="tirggerFile($event)">

tirggerFile : function (event) {

var file = event.target.files; // (利用console.log输出看file文件对象)

  let fileUrl = URL.createObjectURL(file [0]);  // 获取文件url

}

本人的例子:

<input class="fileStyle" @change="cha($event)"  type="file" multiple  accept="image/*">

cha(event){
  let fileList = event.target.files;//文件信息
  let fileUrl = URL.createObjectURL(fileList[0]);  // 获取文件url
  this.uploadingImg=fileUrl
},

data() {
  return {
      uploadingImg:'', //用户上传的图片
    }},

其他

<input type="file" name="file" @change="selectPhoto($event)" accept="image/*"multiple>

selectPhoto(event){

console.log(event.target.files)

let fileList = event.target.files

for(let i=0;i<fileList.length;i++){

this.fileArry.push(fileList[i])

let fileUrl = URL.createObjectURL(fileList[i]);  // 获取文件url

this.list.push({msrc:fileUrl,src:fileUrl}) // data中显示的图片url

}

// let fileList=$(".photoFile").get(0).files[0] // 获取input file 文件信息

// let fileUrl = URL.createObjectURL(fileList);  // 获取文件url

// this.fileArry.push(fileList)

console.log(this.fileArry)

// this.list.push({msrc:fileUrl,src:fileUrl})

event.target.value = "" // 解决不能选同一个文件

    },

本人的参考连接

  https://bbs.csdn.net/topics/391015496

  https://blog.csdn.net/weixin_33901641/article/details/91444059

  https://jingyan.baidu.com/article/cbcede071f349f02f40b4d38.html

  https://www.cnblogs.com/aprilchen-/p/10897115.html

  https://www.cnblogs.com/beileixinqing/p/8043703.html

Input输入框调用相机相关推荐

  1. 关于input在苹果和安卓手机上调用相机和相册的问题

    最近在项目中遇到一个问题,用H5做手机端页面,用input调用相机,苹果手机无法调出相册,安卓手机可以,针对此情况,对手机做出判断,代码如下: <input  type="file&q ...

  2. H5(移动端)前端使用input type=file 上传图片,调用相机和相册

    <input class="addPicInput" type="file" ref="uploadFile"@change=&quo ...

  3. html5打包成app不能拍照,vue项目打包成app无法使用input调用相机

    问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片 解决方案: 1.利用HTML5 Plus的Camera调用相机 2.利用HTML5 Plus的IO来实现读取 ...

  4. css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X

    主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...

  5. h5 调起相机_Html5在手机端调用相机的方法实现

    input调用设备录像,相机等- HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风. 当accept="audio/或video/"时capture只有两种值 ...

  6. element 输入框点击事件_Element Input输入框的使用方法

    本文来源于Element官方文档: 基础用法 带图标的输入框(属性方式) placeholder="请选择日期" suffix-icon="el-icon-date&qu ...

  7. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  8. vue开发微信公众号调用相机和相册(上传到自己的服务器)

    第一步: 下载weixin-js-sdk npm install weixin-js-sdk 第二步: 在需要使用的页面引入sdk import wx from "weixin-js-sdk ...

  9. 弹出框动态增加input输入框

    欢迎关注微信公众号: 程序员小圈圈 原文首发于: www.zhangruibin.com 本文出自于: RebornChang的博客 转载请标明出处^_^ 弹出框动态增加input输入框 最近项目上有 ...

最新文章

  1. Linux ext3grep 恢复数据
  2. 和平精英微信和qq不是一个服务器,和平精英微信和QQ玩家能不能一起玩?微信和QQ怎么开黑建房[图]...
  3. 全球与中国电磁探针台市场前景规划与发展动态分析报告2021-2027年版
  4. 长文总结半监督学习(Semi-Supervised Learning)
  5. 怎么查看ip地址下的php文件夹,pe下查看原系统ip的方法
  6. Zookeeper的结构和命令
  7. db_name,instance_name,service_names,db_domain,dbid,oracle_sid等区别与联系
  8. Android开发22——广播接收者BroadcastReceiver的原理和注册方式
  9. 【个人想法】个人关于数据库字段类型选择的想法
  10. 电脑计算机稳定删除垃圾游戏,电脑卡怎么办简单步骤_如何清理电脑垃圾
  11. proc sys文件系统对比
  12. word另存为html行距,word文档如何设置行间距
  13. Word 分节符插入与删除方法
  14. linux下TSL如何升级,Ubuntu18.04 TSL来了,你升级了吗?
  15. python生兔子问题(递归算法)_python 实现兔子生兔子示例
  16. python 实现usn读取记录
  17. 2019年的软件百强企业榜单
  18. 设置esxi主机时间
  19. Detours: 在二进制代码上截获Win32函数调用
  20. python每个数都可由集合中的某两个数相加而得

热门文章

  1. html5网页中加入播放器,如何嵌入HTML5视频播放器?
  2. c语言赋值表达式的作用,C语言赋值运算符与赋值表达式
  3. C++ string实现原理
  4. SOC上的Flash
  5. 分布式系统中接口的幂等性(转)
  6. 资产重估和资产减值准备
  7. 小程序上拉加载更多数据
  8. 新贵(NEWMEN)魔键 KB-835U 爽手有线键盘 29.9元
  9. mac 安装自己的web 开发软件
  10. 尚硅谷前端HTML-CSS /HTML