php+vant van-uploader手机拍照 上传

设置capture=”user”，则只会调起摄像头；
不设置capture=“user”，则会弹窗让选择相册或拍照。

HTML:

  <link rel="stylesheet" href="/vue/vant.css">

  <van-field name="uploader" label="照片">
    <template #input>
      <van-uploader :after-read="saveImage" v-model="fileList" capture="user" :max-count="1"/>
    </template>
  </van-field>
  

JS部分:

<script src="/js/lrz/lrz.bundle.js"></script>
<script src="/eslydsj/js/layer_v2.1/layer/layer.js"></script>
<script src="/vue/vant.js"></script>
<script> 
    return {
         fileList: [],
    }
    methods: {
        saveImage(file){
	     var that = this;
	      console.log('文件读取成功后的处理');
	      console.log(file);
	      $.showPreloader('图片上传中');
	      lrz(file.file)
              .then(function (rst) {
                var _token = '{{csrf_token()}}';
                rst.formData.append('base64img', rst.base64);
                rst.formData.append('_token', _token);
                $.ajax({
                  url:"/eq/saveImage",
                  type: 'POST',
                  dataType: 'json',
                  data: rst.formData,
                  processData: false,
                  contentType: false,
                  xhrFields: { withCredentials: true },
                  headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Credentials': 'true'
                  },
                  success: function(res){
                    that.url = res.images;
                    $.alert('上传成功');
                    $.hidePreloader();
                  },
                  error: function(){
                    $.alert('上传失败');
                    $.hidePreloader();
                  }
                });
              })
              .catch(function (err) {
                $.alert('上传失败');
              });
    		},
      }
</script>    

///图片上传到服务器 /public/uploads/tmp/下



```php
  public function saveImage(Request $request)
  {
      $tmp = $request->get('base64img');
      if (!empty($tmp)){
          $path = '/uploads';
          $img = '';
          /* 根据base64编码获取图片类型 */
          if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $tmp, $result)) {
              $image_type = $result[2];
              $output_file = 'tmp/'.date('Y-m-d') .'/'. uniqid() . '.' . $image_type;
              $image_binary = base64_decode(str_replace($result[1], '', $tmp));
              Storage::disk('admin')->put($output_file, $image_binary); //存储文件
              $img = $path.'/'.$output_file;
          }
      }else{
          $img = '';
      }
      return response()->json(['status' => 100 , 'message' => '上传完成' , 'images' => $img]);
  }

笔记:
HTML属性capture是否启用用户的前置或后置摄像头和/或麦克风

capture属性放input file文件上传控件上，可以给它一个值“user”或“environment”。user启用用户的后置摄像头和/或麦克风，environment启用用户的前置摄像头和/或麦克风。

<p>
 <label for="soundFile">What does your voice sound like?:</label>
 <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
 <label for="videoFile">Upload a video:</label>
 <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
 <label for="imageFile">Upload a photo of yourself:</label>
 <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>