項目需要一個拍照功能，實現功能如下圖所示:若使用瀏覽器則可以直接上傳圖片，若使用手機則調用手機攝像頭拍照。
1.代碼結構
<!--input標簽-->
<input ref="photoRef"type="file"accept="image/*"capture="environment"@change="handleImageCapture"style="display:none"><!-- 照片框--><div class="photo-box"><!-- 拍照 --><div v-if="cameraShow" @click="cameraClick" class="camera-box"><img src="@/assets/img/camera.png" alt="" class="camera-icon"><div class="text">點擊拍攝照片</div></div><!-- 照片 --><div v-else class="picture-box"><span @click="deletePic"><i class="el-icon-close"></i></span><img id="photoImg" src="" alt=""></div></div>
2.操作函數
/*** 相機點擊事件*/
cameraClick() {this.$refs.photoRef.dispatchEvent(new MouseEvent('click'));
},/*** 上傳照片事件*/
handleImageCapture(event) {if (event.target.files.length === 0) {return;}this.$store.commit('SET_CAMERA_SHOW', false)let file = event.target.files[0];//在頁面展示圖片this.showPhoto(file)this.$store.commit('SET_PHOTO_FILE', file)
},/*** 在頁面展示照片*/
showPhoto(file) {let reader = new FileReader();reader.onload = function (e) {let img = document.getElementById('photoImg');img.src = e.target.result;};reader.readAsDataURL(file);
},/*** 刪除照片*/
deletePic() {this.$store.commit('SET_CAMERA_SHOW', true)this.$store.commit('SET_PHOTO_FILE', null)
}
