微信小程序离线拍照

需要没有网络情况下需要开发能够拍照功能，下次进入图片任然存在的功能

  <view class="photo_one">
    <view class="photo_head">
      <text>{{param.name}}</text>
    </view>
    <view class="photo_body">
      <view
        v-for="(image,j) in param.imageList.list"
        :key="j"
        @click.stop="preview"
        class="photo_item"
      >
        <img :src="image" alt />
        <img src="@/static/img/delete.png" class="clear" @click.stop="onDelete(image,type,j)" />
      </view>

      <view
        v-for="(image,j) in param.imageList.isUploadList"
        :key="j"
        @click.stop="preview"
        class="photo_item"
      >
        <img :src="image" alt />
        <!-- <img src="@/static/img/delete.png" class="clear" @click.sstop="onDelete(image,i,j)" /> -->
      </view>

      <view class="photo_item photo_item_btn" @click="addPhoto(type)">
        <img class="photo_item_btn_img" src="@/static/img/photo.png" alt />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    param: Object,
    type: String,
    iperaId: String,
  },

  methods: {
    /*
     添加图片
     */
    addPhoto(type) {
      const that = this;
      uni.chooseImage({
        count: 6, //默认9
        sizeType: "compressed", //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: function (res) {
          that.addImage(res, type);
        },
      });
    },

    /*
     * 图片存储
     */
    addImage(res, type) {
      const that = this;
      const tempFilePaths = res.tempFilePaths;
      try {
        uni.saveFile({
          tempFilePath: tempFilePaths[0],
          success(req) {
            const value = uni.getStorageSync(that.iperaId + type);
            const data = value
              ? [...value, req.savedFilePath]
              : [req.savedFilePath];
            uni.setStorageSync(that.iperaId + type, data);
            that.$emit("addPhoto", type, req.savedFilePath);
          },
        });
      } catch (error) {}
    },

    /* 
      预览图片
    */
    preview() {
      const { list, isUploadList } = this.param.imageList;
      uni.previewImage({
        urls: [...list, ...isUploadList],
        indicator: "default",
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {},
          fail: function (err) {},
        },
      });
    },
    /* 
      删除图片
     */
    onDelete(image, type, key) {
      const that = this;
      uni.showModal({
        title: "提示",
        content: "是否删除当前图片",
        success: function (res) {
          if (res.confirm) {
            that.deleteFile(image, type, key);
          }
        },
      });
    },

    /*
     删除存储图片 
     */
    deleteFile(image, type, key) {
      const that = this;
      uni.getSavedFileList({
        success: (res) => {
          const panoramaImages = uni.getStorageSync(that.iperaId + type)
            ? uni.getStorageSync(that.iperaId + type)
            : [];
          panoramaImages.length ? panoramaImages.splice(key, 1) : "";

          if (panoramaImages.length) {
            uni.setStorageSync(that.iperaId + type, panoramaImages);
          } else {
            uni.removeStorage({
              key: that.iperaId + type,
            });
          }

          if (res.fileList.length > 0) {
            uni.removeSavedFile({
              filePath: image,
              complete: function (res) {},
            });
          }
          that.$emit("onDelete", type, panoramaImages);
        },
      });
    },
  },
};
</script>

<style>
@import "./index.css";
</style>

第一次写相关文章，还在学习中，若有问题请留言