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

news/2024/9/24 3:17:25/

在这里插入图片描述

设置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/下```phppublic 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>