Merge branch 'task/reservation/video' into 'release'

feat: 预约单列表/病情照片支持上传视频

See merge request !285

src/components/editor/upload-img.vue

@@ -12,22 +12,33 @@
       :on-exceed="handleExceed"
       :file-list="imgArr"
       :accept="accept"
+      :before-upload="beforeUpload"
     >
       <i class="el-icon-plus" />
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img
+        v-if="isImage"
         width="100%"
         :src="dialogImageUrl"
         alt=""
       >
+      <video
+        v-if="isVideo"
+        id="video"
+        :src="dialogVideoUrl"
+        style="width: 100%;height: 80vh;object-fit: fill;"
+        autoplay
+        controls
+        loop
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import { getBaseUrl } from '@/utils/index';
-  export default {
+import { getBaseUrl } from '@/utils/index';
+export default {
   props: {
     isDisable: {
       type: Boolean,
@@ -49,7 +60,10 @@
         token: localStorage.getItem('token'),
       },
       actionurl: '#',
-        accept: '.png,.jpeg',
+      accept: '.png,.jpeg,.mp4',
+      isImage: false,
+      isVideo: false,
+      dialogVideoUrl: ''
     };
   },
   watch: {
@@ -66,8 +80,20 @@
       this.imgArr = fileList;
     },
     handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
+      const isImage = file.raw.type.startsWith('image/');
+      const isVideo = file.raw.type.startsWith('video/mp4');
       this.dialogVisible = true;
+
+      if (isVideo) {
+        this.isVideo = true;
+        this.isImage = false;
+      }
+
+      if (isImage) {
+        this.isImage = true;
+        this.isVideo = false;
+        this.dialogImageUrl = file.url;
+      }
     },
     handleExceed(files, fileList) {
       this.$message.warning(
@@ -78,7 +104,7 @@
     },
     sucess(response, file, fileList) {
       console.log(response);
-        console.log(file);
+      this.getVideoCover(file);
       this.imgArr = fileList;
     },
     setNewArr() {
@@ -94,8 +120,47 @@
       }
       return newArr;
     },
+    beforeUpload(file) {
+      const isImage = file.type.startsWith('image/');
+      const isVideo = file.type.startsWith('video/mp4');
+      if (isImage) {
+        this.isImage = true;
+        this.isVideo = false;
+      }
+
+      if (isVideo) {
+        this.isVideo = true;
+        this.isImage = false;
+      }
     },
+    /**
+     * 获取视频第一帧作为回显封面
+     * @param file 至少应包含url信息，即 {url: ""}
+    */
+    getVideoCover(file) {
+      const video = document.createElement('video'); // 也可以自己创建video
+      video.src = file.url; // url地址 url跟 视频流是一样的
+      var canvas = document.createElement('canvas'); // 获取 canvas 对象
+      const ctx = canvas.getContext('2d'); // 绘制2d
+      video.crossOrigin = 'anonymous'; // 解决跨域问题，也就是提示污染资源无法转换视频
+      video.currentTime = 1; // 第一帧
+
+      video.oncanplay = () => {
+        canvas.width = video.clientWidth ? video.clientWidth : 320; // 获取视频宽度
+        canvas.height = video.clientHeight ? video.clientHeight : 320; // 获取视频高度
+        // 利用canvas对象方法绘图
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        // 转换成base64形式
+        const videoFirstimgsrc = canvas.toDataURL('image/png'); // 截取后的视频封面
+        const videoUrl = file.url;
+        file.url = videoFirstimgsrc; // file的url储存封面图片
+        this.dialogVideoUrl = videoUrl;
+        video.remove();
+        canvas.remove();
       };
+    }
+  },
+};
 </script>
 
 <style></style>