uniapp开发app时，app端uni.chooseImage使用相机拍照时如何添加模态框

在UniApp中，当使用`uni.chooseImage` API 调用相机拍照功能时，为了增加一种模态框的效果，你可以通过创建一个新的页面组件，然后在这个组件内部封装选择图片的功能，并在需要时显示这个自定义的模态组件。以下是大致步骤：

1. **创建模态组件**:
- 在 UniApp 的项目中，新建一个名为 `CameraModal.vue` 的文件，编写一个 Vue 组件，包含拍摄按钮、加载提示等元素。

   <template>
     <view class="camera-modal">
       <button @click="launchCamera">拍照片</button>
       <view v-if="loading" class="loading-indicator"></view>
     </view>
   </template>

   <script>
   export default {
     data() {
       return {
         loading: false,
       };
     },
     methods: {
       launchCamera() {
         this.loading = true;
         uni.chooseImage({
           // ... 其他选择图片配置选项
           success(res) {
             this.loading = false; // 关闭加载状态
             // ... 处理上传或展示图片操作
           }
         });
       }
     }
   }
   </script>

这里我们设置了一个加载状态 (`loading`) 来控制是否显示加载提示。

2. **在父组件调用**:
在你需要使用模态框的地方，导入并实例化这个组件，然后在适当的时机显示它。例如，在全局事件总线或者生命周期钩子里触发打开。

   import CameraModal from '@/components/CameraModal.vue';

   export default {
     methods: {
       takePhotoWithModal() {
         const modal = new CameraModal();
         modal.$mount(); // 将组件挂载到 DOM 中
         modal.launchCamera();
         // 当用户完成操作后，可以调用 modal.$destroy() 清除组件
       }
     }
   }