持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
前言
最近在搞h5项目，项目中用到了上传相册照片和拍照的功能，在网上找了一下发现input就能实现这个功能，下面做下记录。
h5调用相册和相机的方法
只需要写一个input标签就行了，只是不同的属性代表了不同的意思，这里要说明的一点就是相机和相册是相同的属性配置，手机会弹出两个选项让你选择是要相机拍照还是相册选择照片，代码如下：
//首先是调用相机和相册的方法
**<input type="file" accept="image/*" />**
//如果想只调用相机就加capture=camera就行了
<input type="file" accept="image/*;capture=camera">
//如果要调用视频就加capture=camcorder
<input type="file" accept="video/*;capture=camcorder">
//如果要调用你音频就加capture=microphone
<input type="file" accept="audio/*;capture=microphone">
注意：这里使用调相机和相册的方法的时候弹出来的相机和相册选择框不同手机会有不同的样式，可能需要自己进一步修改
在vue中的使用
<input id="photoBtn" ref="photoref" type="file" accept="image/*" />
<div @click="takingPicture">拍照</div>
methods:{
takingPicture() {
this.Photograph()
},
async Photograph() {
//这里是获取到dome元素，用于触发直接进入相机，要不然会有一个button，需要点击一下才能打开相机
var photoBtn = document.querySelector('#photoBtn')
photoBtn.click()
// 图片转base64
this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0])
console.log(this.base64ImgData)
// this.$emit('photoData', this.base64ImgData)
},
/**
* 图片转base64
*/
FileReader(FileInfo) {
const reader = new FileReader()
reader.readAsDataURL(FileInfo)
return new Promise(resolve => (reader.onloadend = () => resolve(reader.result)))
}
}
van-uploader
用于做的是h5项目，所以选择了使用vant ui框架，它里边提供的van-uploader组件就实现了上述方法，用着会比较方便一点，直接拿过来就能用，但就是改样式的话比较麻烦，我就是嫌改样式比较麻烦选择了上述方法来实现拍照和上传照片，样子想怎么样就怎么样。
获取的图片上传个后端服务器
uploadImg(file, detail) {
if (this.fileImgList.length < 6) {
const formData = new FormData()
formData.append('file', file.file)
axios.post(`后端url`, formData, {
headers: {
Authorization:'这里是自己的token'
}
})
.then(res => {
})
.catch(err => {
console.log(err)
})
} else {
this.$toast('最多上传九张照片！')
}
},
总结
在开发中用ui框架开发速度会很更快，但往往修改样式会很麻烦，有些功能还是要老老实实的写 ，修改这也方便，不过讲道理，框架用着是真滴方便，继续搬砖了，gogogo
