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/下```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> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/705275.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于 vs2019 c++20 规范里的一个全局函数 _Test_callable

&#xff08;1&#xff09;看名思议&#xff0c;觉得这个函数可以测试其形参是否是可以被调用的函数&#xff0c;或可调用对象&#xff1f; 不&#xff0c;这个名字不科学。有误导&#xff0c;故特别列出。看下其源码&#xff08;该函数位于 头文件&#xff09;&#xff1a; 辅…

使用可接受gitlab参数的插件配置webhook

jenkins配置 安装Generic Webhook Trigger 配置远程触发令牌 勾选Print post content和Print contributed variables用于打印值 配置gitlab 选择新增webhook 配置webhook http://JENKINS_URL/generic-webhook-trigger/invoke,将JENKINS_URL修改成自己的jenkins地址 先保存…

基于springboot+vue+Mysql的校园闲置物品交易网站

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

AWS简介

AWS AWS&#xff0c;全称为Amazon Web Services&#xff0c;是亚马逊公司旗下的云计算服务平台&#xff0c;自2006年起向全球用户提供广泛而深入的云计算服务。AWS是全球最全面、应用最广泛的云平台之一&#xff0c;它从全球的数据中心提供超过200项功能齐全的服务&#xff0c…

分布式系统的一致性与共识算法(三)

顺序一致性(Sequential Consistency) ZooKeeper 一种说法是ZooKeeper是最终一致性&#xff0c;因为由于多副本、以及保证大多数成功的ZAB协议&#xff0c;当一个客户端进程写入一个新值&#xff0c;另外一个客户端进程不能保证马上就能读到这个值&#xff0c;但是能保证最终能…

mysql的explain

explain可以用于select&#xff0c;delete&#xff0c;insert&#xff0c;update的statement。 当explain用于statement时&#xff0c;mysql将会给出其优化器&#xff08;optimizer&#xff09;的执行计划。 通过explain字段生成执行计划表。下面来解析这个执行计划表的每一列…

【以规划为导向的自动驾驶】Planning-oriented Autonomous Driving

ABSTRACT 研究背景&#xff1a; 现代自动驾驶系统是顺序化地排列多个任务模块, 近期的主流方法&#xff1a; ①为单个任务部署独立模型 ②设计具有分离式头部的多任务(multi-task)范式。 但是&#xff0c;这些方法会累积误差或任务间协同不足而不利于自动驾驶。 作者认为重…

战网国际服注册教程 暴雪战网国际服账号注册一站式教程分享

战网国际版&#xff0c;也即Battle.net环球版&#xff0c;是由暴雪娱乐操刀的全球化游戏交流枢纽&#xff0c;它突破地理限制&#xff0c;拥抱全世界的游戏玩家。与仅限特定地区的版本不同&#xff0c;国际版为玩家开辟了无障碍通道&#xff0c;让他们得以自由探索暴雪庞大游戏…

免费体验GPT-4o这5大功能,非常好用!

这几天&#xff0c;OpenAI发布了新的GPT版本&#xff0c;GPT-4o&#xff0c;比GPT4更加智能也更快。 据说&#xff0c;GPT-4o在文本、推理和编码智能方面实现了GPT-4 Turbo级别的性能&#xff0c;在多语言、文本、音频和视觉功能方面甚至超过了市面上所有同类产品。 有几个亮点…

潮玩与游戏的结合点——潮玩宇宙App与链游

本文主要介绍了潮玩宇宙App的开发过程及其链游的开发&#xff0c;探讨了潮玩与游戏的结合点&#xff0c;分析了其市场前景和潜在风险&#xff0c;并提出了相应的建议。 一、潮玩宇宙App的开发背景 随着互联网的普及和人们对娱乐方式的多样化需求&#xff0c;潮玩市场逐渐崛起…

结合小波变换的遥感语义分割网络,融合频域和空间域特征提升分割效果

题目:SFFNet: A Wavelet-Based Spatial and Frequency Domain Fusion Network for Remote Sensing Segmentation 论文:http://arxiv.org/abs/2405.01992 代码:https://github.com/yysdck/SFFNet 年份:2024 创新点 两阶段网络SFFNet:网络首先使用空间方法提取特征,以保…

Java开发大厂面试第03讲:线程的状态有哪些?它是如何工作的?

线程&#xff08;Thread&#xff09;是并发编程的基础&#xff0c;也是程序执行的最小单元&#xff0c;它依托进程而存在。一个进程中可以包含多个线程&#xff0c;多线程可以共享一块内存空间和一组系统资源&#xff0c;因此线程之间的切换更加节省资源、更加轻量化&#xff0…