Input输入框调用相机

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)">

 

扫描二维码关注公众号,回复: 6998809 查看本文章

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

猜你喜欢

转载自www.cnblogs.com/qhantime/p/11331896.html