拍照 并上传 uniapp

在uni-app中，您可以使用内置的相机组件`uni.chooseImage`来实现拍照功能，并使用`uni.uploadFile`来上传照片。下面是一个基本的示例代码：

<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, // 最多可选择的图片数量
        sourceType: ['camera'], // 选择图片的来源，这里设置为相机
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.photoUrl = tempFilePaths[0]; // 将拍照后的照片路径保存到data中
          this.uploadPhoto(tempFilePaths[0]); // 上传照片
        },
      });
    },
    uploadPhoto(filePath) {
      uni.uploadFile({
        url: 'http://your-upload-api-url', // 替换为您的上传接口地址
        filePath,
        name: 'file', // 上传文件对应的字段名
        formData: {
          // 可以添加额外的表单数据
          // 如token、user_id等
        },
        success: (res) => {
          console.log(res);
          // 处理上传成功后的逻辑
        },
        fail: (error) => {
          console.log(error);
          // 处理上传失败的逻辑
        },
      });
    },
  },
};
</script>

在上述示例中，我们在按钮的点击事件中调用`uni.chooseImage`方法，并设置`sourceType`为相机，以便从相机中获取照片。成功拍照后，会返回一个临时文件路径，我们将该路径保存到`photoUrl`变量中，并使用`image`组件来显示拍照后的照片。同时，我们调用了`uploadPhoto`方法来上传照片。

在`uploadPhoto`方法中，我们使用`uni.uploadFile`方法来进行上传操作。您需要将`url`替换为您的上传接口地址，并根据需要设置其他参数，如表单数据和文件对应的字段名。

请注意，示例中的代码仅供参考，您需要根据实际需求进行适当的修改和完善。

希望以上信息对您有所帮助！如果还有其他问题，请随时提问。