From cfb4f9de8a85a8773436b72ed903257455375aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Wed, 23 Mar 2022 17:10:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=A7=86=E9=A2=91=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoUpload/index.vue | 346 +++++++++++++++++++++++++++
 src/main.js                          |   3 +
 2 files changed, 349 insertions(+)
 create mode 100644 src/components/VideoUpload/index.vue

diff --git a/src/components/VideoUpload/index.vue b/src/components/VideoUpload/index.vue
new file mode 100644
index 0000000..a506af3
--- /dev/null
+++ b/src/components/VideoUpload/index.vue
@@ -0,0 +1,346 @@
+<template>
+  <div>
+    <el-upload
+      :headers="headers"
+      :action="videoUploadUrl"
+      list-type="picture-card"
+      :on-success="handleSuccess"
+      :on-error="handleUploadError"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :on-progress="handleProgress"
+      :data="data"
+      accept="video/mp4"
+      :class="{ hide: fileList.length >= limit }"
+    >
+      <!-- accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb" -->
+      <!-- :disabled="fileList.length >= limit || uploadBtn" -->
+      <template #default>
+        <i class="el-icon-plus"></i>
+      </template>
+      <template #file="{ file }">
+        <div style="height: 100%">
+          <video
+            class="el-upload-list__item-thumbnail"
+            :src="file.url"
+            alt=""
+          ></video>
+          <span class="el-upload-list__item-actions">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handleShowVideo(file)"
+            >
+              <i class="el-icon-video-play"></i>
+            </span>
+            <!-- <span
+              class="el-upload-list__item-edit"
+              @click="handleEditVideo(file)"
+            >
+              <el-icon><Edit /></el-icon>
+            </span> -->
+            <span
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+            >
+              <i class="el-icon-delete"></i>
+            </span>
+          </span>
+          <el-progress
+            type="circle"
+            class="progressModule"
+            :color="colors"
+            :percentage="Number(uploadPercentage)"
+            v-if="showProgress && file.url == uploadUrl"
+          ></el-progress>
+        </div>
+      </template>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
+      的文件
+    </div>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="预览"
+      append-to-body
+      width="40%"
+    >
+      <video
+        :src="dialogVideoUrl"
+        alt=""
+        autoplay
+        class="video"
+        controls="controls"
+      ></video>
+    </el-dialog>
+    <!-- <el-dialog v-model="editView" width="40%" append-to-body>
+      <el-input
+        type="textarea"
+        :rows="4"
+        v-model="editForm.url"
+        @input="editVideo"
+      ></el-input>
+    </el-dialog> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  computed: {
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(",");
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === "string") {
+              item = { name: item, url: item };
+              // if (item.indexOf(this.baseUrl) === -1) {
+              //   item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              // } else {
+              //   item = { name: item, url: item };
+              // }
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      // 设置上传的请求头部
+      headers: { "x-token": getToken() },
+      baseUrl: process.env.VUE_APP_BASE_API,
+      videoUploadUrl: process.env.VUE_APP_BASE_API + "/admin/v1/upload",
+      dialogVideoUrl: "",
+      dialogVisible: false,
+      fileList: [],
+      editForm: {
+        url: "",
+        uid: null,
+      },
+      editView: false,
+      uploadPercentage: 0,
+      showProgress: false,
+      uploadUrl: "",
+      colors: [
+        { color: "#ADD8E6", percentage: 20 },
+        { color: "#87CEEB", percentage: 40 },
+        { color: "#87CEFA", percentage: 60 },
+        { color: "#00BFFF", percentage: 80 },
+        { color: "#1296DB", percentage: 100 },
+      ],
+      uploadBtn: false,
+      loading: null,
+    };
+  },
+  methods: {
+    // 移除视频
+    handleRemove(file) {
+      const findex = this.fileList.map((f) => f.url).indexOf(file.url);
+      if (findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.submitFile();
+      }
+    },
+    handleShowVideo(file) {
+      this.dialogVideoUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleBeforeUpload(file) {
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        const isTypeOk = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+        if (!isTypeOk) {
+          this.$message.error(
+            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
+          );
+          return false;
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    handleUploadError() {
+      if (this.loading) {
+        this.loading.close();
+      }
+    },
+    // 上传完成
+    handleSuccess(response, file, fileList) {
+      this.showProgress = false;
+      this.uploadBtn = false;
+      if (response.code != "200") {
+        for (var i = 0; i < fileList.length; i++) {
+          if (i + 1 == fileList.length) {
+            fileList.splice(i, 1);
+          }
+        }
+        this.$message.error(response.message);
+        this.loading.close();
+        return;
+      } else {
+        this.$message.success(response.message);
+        let obj = {
+          name: response.data.filename,
+          status: "success",
+          uid: file.uid,
+          url: response.data.url,
+        };
+        this.fileList.push(obj);
+        this.loading.close();
+        this.submitFile();
+      }
+    },
+    // 播放视频
+    handleEditVideo(file) {
+      this.editForm.url = file.url;
+      this.editForm.uid = file.uid;
+      this.editView = true;
+    },
+    // 编辑视频
+    editVideo() {
+      for (let i in this.fileList) {
+        if (this.fileList[i].uid == this.editForm.uid) {
+          this.fileList[i].url = this.editForm.url;
+        }
+      }
+      this.submitFile();
+    },
+    submitFile() {
+      // this.$emit("submitImg", this.fileList);
+      this.$emit("input", this.listToString(this.fileList));
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+    // 上传进度
+    handleProgress(response, file, fileList) {
+      this.uploadBtn = true;
+      this.uploadUrl = file.url;
+      this.showProgress = true;
+      this.uploadPercentage = file.percentage.toFixed(0);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-icon-plus {
+  font-size: 30px !important;
+}
+.el-icon-edit {
+  font-size: 18px !important;
+}
+.el-icon-video-play {
+  font-size: 18px !important;
+}
+.el-icon-delete {
+  font-size: 18px !important;
+  color: rgb(243, 143, 130);
+}
+.el-input >>> .el-textarea__inner {
+  font-size: 18px !important;
+}
+.video {
+  display: block;
+  margin: auto;
+  min-height: 200px;
+  max-height: 600px;
+  min-width: 200px;
+  max-width: 100%;
+}
+.progressModule >>> .el-progress__text {
+  color: #1296db;
+  font-size: 15px !important;
+}
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 485e44c..759409f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -39,6 +39,8 @@ import Editor from '@/components/Editor'
 import FileUpload from '@/components/FileUpload'
 // 图片上传组件
 import ImageUpload from '@/components/ImageUpload'
+// 视频上传组件
+import VideoUpload from '@/components/VideoUpload'
 // 图片预览组件
 import ImagePreview from '@/components/ImagePreview'
 // 字典标签组件
@@ -76,6 +78,7 @@ Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
+Vue.component('VideoUpload', VideoUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('SiteOptions', SiteOptions)