uni-app实现拍照功能

直接些这样的组件代码

<template>
  <view>
    <button @click="takePhoto">拍照button>
    <image :src="photoUrl" v-if="photoUrl" mode="aspectFit">image>
  view>
template>

<script>
export default {
  data() {
    return {
      photoUrl: '', // 存储拍照后的照片路径
    }
  },
  methods: {
    takePhoto() {
      uni.chooseImage({
        count: 1, // 最多选择1张照片
        sourceType: ['camera'], // 从相机选择照片
        success: (res) => {
          this.photoUrl = res.tempFilePaths[0]; // 获取拍照后的照片路径
        },
        fail: (err) => {
          console.log('拍照失败', err);
        }
      });
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

然后我们用手机访问

然后点击上方的拍照按钮

然后 他就会很自然的打开我们的手机相机

我们拍完确定之后 photoUrl就很自然的拿到了图片的结果