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

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

See merge request com.pica.cloud.education.frontend/pica-admin-consultation!285

src/components/editor/upload-img.vue

@@ -12,90 +12,155 @@
       :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 {
-    props: {
-      isDisable: {
-        type: Boolean,
-        default: false,
-      },
-      imgList: {
-        type: Array,
-        default: () => {
-          return [];
-        },
-      },
+import { getBaseUrl } from '@/utils/index';
+export default {
+  props: {
+    isDisable: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false,
-        imgArr: [],
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-        actionurl: '#',
-        accept: '.png,.jpeg',
-      };
+    imgList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    watch: {
-      imgList(newv) {
-        this.imgArr = newv;
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      imgArr: [],
+      headers: {
+        token: localStorage.getItem('token'),
       },
+      actionurl: '#',
+      accept: '.png,.jpeg,.mp4',
+      isImage: false,
+      isVideo: false,
+      dialogVideoUrl: ''
+    };
+  },
+  watch: {
+    imgList(newv) {
+      this.imgArr = newv;
     },
-    created() {
-      this.actionurl = getBaseUrl('/diagnose/illness/file');
+  },
+  created() {
+    this.actionurl = getBaseUrl('/diagnose/illness/file');
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file);
+      this.imgArr = fileList;
     },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file);
-        this.imgArr = fileList;
-      },
-      handlePictureCardPreview(file) {
+    handlePictureCardPreview(file) {
+      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;
-        this.dialogVisible = true;
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(
-          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-            files.length + fileList.length
-          } 个文件`
-        );
-      },
-      sucess(response, file, fileList) {
-        console.log(response);
-        console.log(file);
-        this.imgArr = fileList;
-      },
-      setNewArr() {
-        const newArr = [];
-        if (this.imgArr && this.imgArr.length) {
-          this.imgArr.forEach((item) => {
-            if (item.response) {
-              newArr.push(item.response.data);
-            } else if (item.url && item.from) {
-              newArr.push(item.url);
-            }
-          });
-        }
-        return newArr;
-      },
+      }
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    sucess(response, file, fileList) {
+      console.log(response);
+      this.getVideoCover(file);
+      this.imgArr = fileList;
+    },
+    setNewArr() {
+      const newArr = [];
+      if (this.imgArr && this.imgArr.length) {
+        this.imgArr.forEach((item) => {
+          if (item.response) {
+            newArr.push(item.response.data);
+          } else if (item.url && item.from) {
+            newArr.push(item.url);
+          }
+        });
+      }
+      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>