微信小程序拍照上传 vue+js代码示例

以下是一个基于Vue和JavaScript的微信小程序拍照上传示例代码：

<template>
  <div>
    <button @click="takePhoto">拍照</button>
    <img v-if="photo" :src="photo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      photo: null,
    };
  },
  methods: {
    takePhoto() {
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadPhoto(tempFilePaths[0]);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    uploadPhoto(filePath) {
      wx.uploadFile({
        url: '上传图片的接口地址',
        filePath: filePath,
        name: 'file',
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.code === 0) {
            this.photo = data.url;
          } else {
            console.log('上传失败');
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
};
</script>

在这个示例代码中，我们使用`wx.chooseImage`方法从相机中选择一张照片，然后使用`wx.uploadFile`方法将其上传到服务器。上传成功后，我们将照片的URL保存到`photo`变量中，并在页面上显示。请注意，你需要将`上传图片的接口地址`替换为你实际的上传接口地址。