近年來，移動端的發展使得拍照成為了一個很重要的功能，許多公司的應用中都需要用戶上傳照片，而往往這些照片需要進行裁剪，才能符合應用的樣式要求。由于Vue的流行，我們可以使用Vue實現拍照、裁剪、上傳這個功能。

首先，我們需要使用到一個叫做vue-cropper的庫來實現裁剪。通過npm的方式來安裝它：

npm install vue-cropper --save

接著，在我們的代碼中引入它：

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

然后，我們需要在html中添加如下的code：

<vue-cropper
 :img="img"
 :outputSize="outputSize"
 :outputType="outputType"
 :canScale="canScale"
 ref="cropper"
></vue-cropper>

這時候，我們就可以看到一個功能豐富的圖片裁剪模塊了。接著，我們需要讀取攝像頭的數據。可以直接使用 navigator.mediaDevices.getUserMedia 函數獲取視頻流，然后將視頻流轉成Blob對象：

const stream = await navigator.mediaDevices.getUserMedia({
video: {
width: 300,
height: 300
}
})
let videoTracks = stream.getVideoTracks()
let v = document.querySelector('video')
v.onloadedmetadata = (e) =>{
v.play()
}
v.srcObject = stream
await this.$nextTick()
let canvas = document.createElement('canvas')
canvas.width = this.canvasSize.width
canvas.height = this.canvasSize.height
let ctx = canvas.getContext('2d')
ctx.drawImage(v, 0, 0, this.canvasSize.width, this.canvasSize.height)
canvas.toBlob((blob) =>{
let formData = new FormData()
formData.append('file', blob, Math.floor(Date.now() / 1000) + '.jpg')
// 接下來，這里可以上傳formData對象
})

關于上傳的部分，這里不再贅述。這樣，我們就完成了通過Vue拍照、裁剪、上傳的功能。