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

Vue3 + Element Plus 中实现图片上传和拍照功能通常会结合Element UI的`el-upload`组件和原生HTML5的`<input type="file" accept="image/*">`以及`navigator.mediaDevices.getUserMedia()`。以下是步骤概览：

1. **设置upload组件**:
使用Element Plus的`el-upload`组件，配置成支持文件和相机选择：

   <el-upload
     action=""
     :auto-upload="false"
     accept="image/jpeg,image/png"
     :on-change="handleImageChange"
     ref="upload"
   ></el-upload>

2. **添加事件处理器**:
- `handleImageChange`处理用户选择的图片：

     async handleImageChange(file) {
       if (file.type.match('image')) {
         // 进行预览
         this.currentImg = URL.createObjectURL(file);
       } else {
         alert('只允许上传图片');
       }
     }

- 拍照事件，可以使用`getUserMedia`获取媒体流并显示：

     async takePhoto() {
       const constraints = { mediaSource: 'camera' };
       try {
         const stream = await navigator.mediaDevices.getUserMedia(constraints);
         // 将stream转换为File，然后处理同上
         // ...将stream.toBlob().then(blob => ...)...
       } catch (err) {
         console.error(err);
       }
     }

3. **预览效果**:
- 可以通过`v-if`或`v-show`来显示或隐藏图片预览区域：

   <div v-if="currentImg">
     <img :src="currentImg" alt="图片预览"/>
   </div>

4. **提交图片**:
当用户完成编辑或选择满意的照片后，你可以提供一个按钮提交到服务器，比如配合axios发送请求。

submit() {
  if (this.currentImg) {
    axios.post('/api/upload', {
      file: this.currentImg,
    }).then(response => {
      console.log(response);
    });
  }
}