vue3 ,上传图片和拍照上传图片，并实现预览效果

Vue3是一个流行的前端框架，它简化了构建用户界面的过程。对于上传图片和拍照上传图片的功能，Vue3可以结合一些第三方库如Element UI或Vuetify以及HTML5的File API来实现。

1. **图片上传**:
使用`<input type="file">`元素配合`@change`事件，允许用户选择本地图片。例如：

   <el-upload :action="uploadUrl" :on-change="handleChange">
     <i class="el-icon-upload"></i>
   </el-upload>

然后在JavaScript中处理文件：

   methods: {
     handleChange(file) {
       // 进行文件上传操作
     }
   }

2. **拍照上传**:
HTML5提供了一个`navigator.mediaDevices.getUserMedia()`方法，可以获取用户的摄像头。配合`vue-quiver`这样的相机插件，可以实现实时拍摄并上传：

   import Camera from 'vue-quiver'

   components: {
     Camera,
   },
   mounted() {
     this.$refs.camera.start()
   },
   methods: {
     takePhoto() {
       this.$refs.camera.takePicture().then((blob) => {
         // 将Blob转换为File对象，然后上传
         const file = new File([blob], 'image.jpg', {type: 'image/jpeg'})
         //...
       })
     }
   }

3. **预览效果**:
通常会在上传前显示预览图，你可以使用`URL.createObjectURL()`将Blob转换为URL来显示。例如，在`handleChange`函数中添加预览功能：

   handleChange(file) {
     const url = URL.createObjectURL(file);
     this.previewUrl = url;
   }

预览可以使用`v-if`或条件渲染来实现，比如`<img v-if="previewUrl" :src="previewUrl" />`.