一键采集上传常见的细节问题(HTML5实现一键拨号，一键发短信以及上传头像等问题都是比较常见的场景)

　　一键采集上传常见的细节问题(HTML5实现一键拨号，一键发短信以及上传头像等问题都是比较常见的场景)

　　HTML5实现一键拨号、一键发短信、上传头像是比较常见的场景。最近，我在做移动项目时遇到了障碍。问题是通过搜索信息解决的；

　　废话不多说，直接上案例代码；

　　HTML5实现一键拨号：

　　<a href="tel:151********" class="phone">

　　HTML5实现一键发短信：

　　<a href="sms:151********" class="message">

　　是的，你没看错。在HTML5中，只需要使用a标签就可以直接实现一键拨号和一键发短信的功能。当然，我们在项目中的需求一般是动态获取不同的手机号码。当您需要动态更改您的手机号码时，您只需要进行双向绑定即可进行动态拼接。也支持微信内置浏览器，所以在开发webapp的时候不用太担心微信内置浏览器的兼容性问题；

　　上传和更换头像也是我们经常遇到的常见功能。我们知道我们可以直接调用带有标签的文件选择对话框，但是输入框的原创样式很难看。我们可以在输入框中添加样式 display: none 来解决；

　　那么在输入框上传文件的时候就会出现兼容性问题。内置浏览器可以正常运行。一般的webapp运行在微信内置浏览器中。这段代码不会在微信内置浏览器中运行，也不会触发。是的，我们可以这样修改：

　　这样，我们只需要在微信内置浏览器中修改accept属性就可以触发；所以我们在做项目的时候，需要问一下是要微信上线还是去哪里决定选择哪种兼容方式；

　　在上传头像的时候，我们一般都需要和后台数据进行交互。今天调用上传头像界面时，前台显示的参数是base64格式传输的。后台说没有收到，但是我们看到这里是正常的。. 查阅资料后，我们最终将代码修改成这样：

　　let formData = new FormData()

formData.append('name', this.name)

formData.append('idCard', this.idcard)

formData.append('phone', this.phone)

formData.append('icon', this.$refs.hiddenInput.files[0])

formData.append('payzfb', this.aliPay)

formData.append('tgm',this.qrCode)

console.log(this.$refs.hiddenInput.files[0]);

　　首先我们的axios方法需要在前景图片传输到背景时post，然后通过FormData对象传输参数，然后给FormData添加属性和值。图标是我们的图片头像，不能直接把url传到后台。当它到达时，我们需要将 ref="hiddenInput" 绑定到 img 标签，并使用 this.$refs.hiddenInput.files[0] 作为值进行传输，以便传输后台可以接收；我们得到 this.$refs .hiddenInput.files[0] 通过控制台输出，我们可以看到：

　　图像.png

　　嗯，这个博客就在这里。今天的博客是日常开发中常见场景的知识点。有什么问题可以留言，一起讨论！