vue 实现调用摄像头进行拍照功能以及从图库中选择相片功能以及基于photoswipe的vue图片预览 组件

效果图

图一：       图二：      

图三： 

图四： 

使用组件：

使用vue-photo-preview ：https://github.com/826327700/vue-photo-preview

.ts

import photograph from "@/MobileApp/components/photograph";

@Component({
  components: { photograph }
})

.vue

 // 使用拍照以及选择相片功能
 // 使用拍照功能
 // 使用拍选择相片功能

组件：

.vue

.ts 

/**
 * @module MobileApp\components\photograph
 */

import Vue from "vue";
import { Component, Prop, Watch, Emit } from "vue-property-decorator";
import { IndexObject } from "@/types";
import common from "@/MobileApp/utils/common";

@Component
export default class Photograph extends Vue {
  [x: string]: any;
  private isShow = false;
  private photoLists = [];
  private picWidth = 75;
  private picHeight = 90;

  @Prop({ default: "true" }) showAlbum!: string;
  @Prop({ default: "true" }) showPhoto!: string;

  mounted() {}

  private close() {
    this.isShow = false;
  }

  private showType() {
    this.isShow = true;
    this.$nextTick(function() {
      let cameraRemove = this.$refs.cameraRemove as IndexObject;
      let multipleRemove = this.$refs.multipleRemove as IndexObject;
      if (!cameraRemove.parentNode || !multipleRemove.parentNode) {
        return;
      }
      if (this.showAlbum === "false") {
        multipleRemove.parentNode.removeChild(multipleRemove);
      }
      if (this.showPhoto === "false") {
        cameraRemove.parentNode.removeChild(cameraRemove);
      }
    });
  }

    private cameraChange() {
      let inputCameraFile = this.$refs.inputCamera as IndexObject;
      let url;
      if (inputCameraFile.files[0]) {
        url = URL.createObjectURL(inputCameraFile.files[0]);
        (this as any).photoLists.push(url);
      }
      this.$previewRefresh();
    }

    private multipleChange() {
      let url;
      let inputMultiple = this.$refs.inputMultiple as IndexObject;
      if (inputMultiple.files) {
        for (let file of inputMultiple.files) {
          url = URL.createObjectURL(file);
          (this as any).photoLists.push(url);
        }
      }
      this.$previewRefresh();
    }

  private deleImg(index) {
    common
      .dialogConfirm("温馨提示", "请确认要删除此照片?")
      .then(() => {
        // on confirm
        (this as any).photoLists.splice(index, 1);
      })
      .catch(() => {
        // on cancel
      });
  }
}