Bootstrap

vue+h5实现移动端拍照和上传功能

思路:

 <input type="file" name="file" capture="camera" @change="takePhoto($event)">

可以调用原生的相机

 <input type="file" accept="image/*" @change="takePhoto($event)" name="file">

可以调用原生的相册
然后就是获取照片了,可以通过绑定change事件来获取,
最后就是上传,可以用formData来上传,也可以转成base64上传(参考https://www.jianshu.com/p/c562398f169b),本文采用formData结合axios上传
js:

 takePhoto(e){//拍照功能---上传头像
            var file=e.target.files[0]//获取文件对象
            var fd=new FormData()//构造formdata对象
            fd.append('file',file)//向formdata里面存放键值对
            fd.append('uid',this.$store.getters.getUid)//向formdata里面存放键值对,this.$store.getters.getUid是用户的uid
            this.axios.post("http://127.0.0.1:7000/me/upAvatar",fd).then(res=>{
;