使用 ionic + cordova + vue3 实现相册选择、拍照，并上传、预览图片

最新推荐文章于 2026-04-18 08:14:15 发布

原创

最新推荐文章于 2026-04-18 08:14:15 发布 · 3.3k 阅读

标签

#ionic #cordova

本文详细描述了如何在基于ionic和vue的项目中实现上传组件upload.vue，包括模板规划、拍照和相册选择、文件上传、图片类型校验，以及使用Cordova插件处理拍照、相册选择的常见问题。同时介绍了图片放大组件enlarge-image.vue的实现和swiper的使用。

2.图片放大组件 enlarge-image.vue

2.1 点击图片放大

2.2 模板规划

2.3 使用 swiper11 踩坑的过程

1.上传组件 upload.vue

1.1 模板规划

模板包含三部分：

已经上传的图片列表展示，若只读，则不展示删除按钮，每个图片点击后都可以被放大
添加按钮展示，若没有图片，并且非只读，则展示
暂无图片提示

  <div class="t-upload">
    <ion-grid>
      <!-- {
  
  { fileList }} -->

      <!-- 已经上传的图片 -->
      <template v-if="fileList?.length">
        <ion-col v-for="(img, index) in fileList" :key="img?.FILE_ID" size="4">
          <img
            class="file"
            :src="getImgUrl(img)"
            alt=""
            @click="goEnlargeImage(index)"
          />
          <img
            v-if="!readonly"
            class="delete"
            src="@/assets/image/common/upload-delete.png"
            @click.stop="removeFile(img?.FILE_ID)"
          />
        </ion-col>
      </template>

      <!-- 添加图片按钮 -->
      <template v-if="!readonly">
        <ion-col v-if="!fileList?.length || fileList?.length < 9" size="4">
          <img
            class="add-file"
            src="@/assets/image/common/upload-add.png"
            @click="addMediaFile()"
          />
        </ion-col>
      </template>

      <template v-if="!fileList?.length && readonly">
        <div class="fs-14">暂无附件</div>
      </template>
    </ion-grid>
  </div>

1.2 点击添加按钮

点击添加按钮后，会出现一个弹框，让用户选择图片来源：

拍照
相册选择

1.2.1 实现询问弹框

这个很简单，使用 ionic 的 actionSheetController 即可实现，根据用户的选择，决定执行的方法

  async addFile(max: number, callback: any) {
    const actionSheet = await actionSheetController.create({
      header: '附件类型选择',
      buttons: [
        {
          text: '拍照',
          handler: () => {
            this.camera({
              quality: 100,
              destinationType: 1,
              sourceType: 1,
              targetWidth: 1080,
              targetHeight: 1920,
              mediaType: 0,
              encodingType: 1,
            })
              .then(async (res) => {
                callback(res, 'photo');
              })
              .catch((err) => {
                publicService.toast('拍照失败，请重试');
              });
          },
        },
        {
          text: '相册',
          handler: () => {
            this.slectImagePicker({
              maximumImagesCount: max,
              quality: 50,
            })
              .then((res) => {
                callback(res, 'img');
              })
              .catch(() => {
                publicService.toast('相册打开失败');
              });
          },
        },
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.error('Cancel clicked');
          },
        },
      ],
    });
    await actionSheet.present();
  }