uniapp上传图片功能怎么实现？

<template>
  <view>
    <image :src="imageUrl" mode="aspectFill" @click="selectImage"></image>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: '可以加默认图片 因为本身是没有图片的'
    }
  },
  methods: {
    selectImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadImage(tempFilePath);
        }
      });
    },
    uploadImage(filePath) {
      uni.uploadFile({
        url: '示例接口',
        filePath: filePath,
        name: 'file',
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            this.imageUrl = data.url;
            console.log('上传成功:', this.imageUrl);
            // 处理上传成功后的逻辑
          } else {
            console.log('上传失败:', data.msg);
            // 处理上传失败后的逻辑
          }
        },
        fail: (err) => {
          console.log('上传失败:', err);
          // 处理上传失败后的逻辑
        }
      });
    }
  }
}
</script>