解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

HTML5实现一键拨号，一键发短信以及上传头像等问题都是比较常见的场景，近期在做移动端项目的时候遇到阻挠，通过查找资料解决了问题；

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

HTML5实现一键拨号：

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

HTML5实现一键发短信：

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

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

上传、更改头像功能也是我们经常会碰到的常用功能，我们知道可以直接用<input type="file>标签调用选择文件对话框，但是input输入框原生样式很丑，我们可以给输入框添加样式display：none来解决；

然后input输入框上传文件的时候会有兼容性问题，自带浏览器可以正常运行，一般的webapp是运行在微信内置浏览器中的，像这一段代码在微信内置浏览器中是不运行不触发的，我们可以这样修改：

<input id="photo" type="file" accept="image/*" capture="camera">

这样，我们只需要修改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添加属性和值，icon就是我们的图片头像，我们直接传输url后台是收不到的，我们需要给img标签绑定ref="hiddenInput"然后通过this.$refs.hiddenInput.files[0]来作为值传输，这样传输后台是能够收到的；我们获取到的this.$refs.hiddenInput.files[0]通过控制台输出，我们可以看到：

好了，这篇博客就到这里了，今天的博客是属于日常开发中比较常见的场景的知识点，还有什么疑问，大家可以一起留言一起讨论！