思路:
<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=>{