组件上传图片的的时候调用手机摄像头进行拍照

组件上传图片的的时候调用手机摄像头进行拍照,demo记录

import { CommonService } from '@/api' 这个引用是调用上传的组件接口,建议上传组件使用雪花算法进行一个上传数据和列表数据的绑定

<template>
  <div class="s-uploader" style="margin-top: 50px">
    <div class="s-uploader-wrapper" @click="openCamera">
      <div class="s-uploader-upload">
        <van-icon color="#dcdee0" name="photograph" size="24" />
      </div>
    </div>

    <div class="s-uploader-wrapper" @click="openPhotoLibrary">
      <div class="s-uploader-upload">
        <van-icon color="#dcdee0" name="photograph" size="24" />
      </div>
    </div>
  </div>
</template>

<script>
import { CommonService } from '@/api'

// Resolve fileLocalUrl to File object
const resolveFile = fileURL => {
  return new Promise(resolve => {
    window.resolveLocalFileSystemURL(fileURL, fileEntry => {
      fileEntry.file(resolve)
    })
  })
}

// Read File's Blob
const readFile = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onloadend = ev => {
      if (ev.target.error) {
        return reject(ev.target.error)
      }
      return resolve(new Blob([new Uint8Array(reader.result)]))
    }
    reader.onerror = reject
    reader.readAsArrayBuffer(file)
  })
}

export default {
  name: 'CordovaPluginCamera',

  methods: {
    // 调用拍照
    openCamera() {
      // 拍照参数
      const options = {
        // 图像的保存质量，范围 0-100
        quality: 80,
        // 返回 FILE_URI 类型
        destinationType: Camera.DestinationType.FILE_URI,
        // 指定图片来自拍照
        sourceType: Camera.PictureSourceType.CAMERA
      }

      navigator.camera.getPicture(this.onSuccess, this.onError, options)
    },

    // 调用相册
    openPhotoLibrary() {
      // 相册参数
      const options = {
        quality: 80,
        // 返回 FILE_URI 类型
        destinationType: Camera.DestinationType.FILE_URI,
        // 指定图片来自相册
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
      }

      navigator.camera.getPicture(this.onSuccess, this.onError, options)
    },

    //调取成功触发事件
    async onSuccess(imageURL) {
      console.log(imageURL)

      const file = await resolveFile(imageURL)
      const blob = await readFile(file)

      this.uploadFile(blob)
    },

    //调取失败触发事件
    onError(message) {
      console.log('message', message)
    },

    // 上传图片
    async uploadFile(blob) {
      const data = new FormData()
      data.append('file', blob)
      console.log(blob)

      const result = await CommonService.uploadPicFile(data)
      console.log(result)
    }
  }
}
</script>

<style lang="less" scoped>
.s-uploader {
  width: 100%;
  height: 100vh;
  background-color: #fff !important;
}

.s-uploader-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
  background-color: #f7f8fa;
}
</style>