素材管理 视频上传

src/views/manage/materials/index.vue

@@ -189,13 +189,12 @@
           prop="materialsFilePath"
           v-if="form.materialsType == 'VIDEO'"
         >
-          <stationAcatar
+        <trainingAvatar
-            style="width: 208px"
+                  @imgUrl="imgUrl2"
-            @imgUrl="imgUrl2"
+                  :tovideo="form.materialsFilePath"
-            :tovideo="form.materialsFilePath"
+                  :type="'materialsVideoUrl'"
-            :type="'materialsVideoUrl'"
+                />
-            v-if="open"
+
-          />
         </el-form-item>
 
         <el-form-item
@@ -309,10 +308,11 @@
 <script>
 import { listMaterials, getMaterials, delMaterials, addMaterials, updateMaterials,crowdInfo } from "@/api/manage/materials";
 import stationAcatar from "../../system/stationAvatar/index.vue";
+import trainingAvatar from "../../system/trainingAvatar/index.vue";
 
 export default {
   name: "Materials",
-  components: { stationAcatar },
+  components: { stationAcatar ,trainingAvatar},
   dicts: ['crowd_type', 'materials_type', 'video_cover_type'],
   data() {
     return {
@@ -431,10 +431,14 @@ export default {
     },
     // 素材类型
     radioChange(e) {
+      if(e=='VIDEO'){
       this.form.materialsFilePath=null
       this.form.videoCoverFilePath=null
+      }else if(e=='IMAGE_TEXT'){
+        this.form.materialsFilePath=null
+      this.form.videoCoverFilePath=null
 
-      console.log(e)
+      }
 
     },
     // 素材上传
@@ -445,7 +449,9 @@ export default {
     imgUrl2(imgUrl) {
       this.form.materialsFilePath = process.env.VUE_APP_BASE_API + imgUrl;
       this.form.materialsFilePath = imgUrl;
+
     },
+
     // 视频封面
     imgUrl3(imgUrl) {
       console.log(this.form.videoCoverFilePath)

src/views/system/trainingAvatar/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
+      <video style="width: 208px; height: 208px" v-bind:src="video.VideoPath" v-if="video.VideoPath"
+        class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
+      <i class="el-icon-plus avatar-uploader-icon" style="
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          "></i>
+    </div>
+    <el-dialog :title="title" :visible.sync="openimg" width="950px" append-to-body @opened="modalOpened"
+      @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="24" :style="{ height: '350px' }">
+          <div class="avatar-upload-preview">
+            <video v-if="openimg" style="width: 100%; height: 100%" v-bind:src="videoForm.showVideoPath"
+              class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-progress v-if="progressFlag" :percentage="loadProgress" style="height:30px;padding-bottom:20px"></el-progress>
+      <el-row style="padding-bottom:0px">
+        <el-col :lg="3" :md="2">
+          <el-upload :show-file-list="false" class="upload-demo" ref="upload" :action="uploadurl"
+            :on-preview="handlePreview" :auto-upload="false" :on-change="loadJsonFromFile" :data="filedata"
+            :headers="headers" :on-progress="uploadVideoProcess" :on-success="handleAvatarSuccess">
+            <el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{ span: 2, offset: 18 }" :md="2">
+          <el-button v-if="uploadbtn" type="primary" size="small" @click="submitUpload">提 交</el-button>
+          <el-button v-else :loading="!uploadbtn" type="primary" size="small">提交中...</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { VueCropper } from "vue-cropper";
+import { uploadFilefm } from "@/api/system/stationAvatar.js";
+import { getToken } from "@/utils/auth";
+export default {
+  components: { VueCropper },
+  props: ["img", "type", "item", "tovideo"],
+  data() {
+    return {
+      fileList: [],
+      loadProgress: 0, // 动态显示进度条
+      progressFlag: false, // 关闭进度条
+      uploadbtn: true, //上传中不允许点击
+      imageUrl: "",
+      // 是否显示弹出层
+      openimg: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "上传图片/视频",
+      filedata: {
+        type: ""
+      },
+      headers: {
+        Authorization: "Bearer " + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      },
+      options: {
+        img: null, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 300, // 默认生成截图框宽度
+        autoCropHeight: 300, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {},
+      items: {},
+      //显示上传按钮
+      videoForm: {
+        showVideoPath: null //回显的变量
+      },
+      video: {
+        VideoPath: null //回显的变量
+      },
+      uploadurl: undefined
+    };
+  },
+  created() {
+    this.uploadurl =
+      process.env.VUE_APP_BASE_API + "/manage/file/uploadFile";
+    this.uploadbtn = true;
+    this.filedata.type = this.type;
+    this.items = this.item;
+    if (this.tovideo == null) {
+      this.video.VideoPath = null;
+    } else if (this.tovideo == "") {
+      this.video.VideoPath = null;
+    } else {
+      this.videoForm.showVideoPath =
+        process.env.VUE_APP_BASE_API + this.tovideo;
+      this.video.VideoPath = process.env.VUE_APP_BASE_API + this.tovideo;
+    }
+    this.title = "上传视频";
+  },
+  watch: {
+    tovideo: {
+      handler(newimg, oldimg) {
+        this.uploadbtn = true;
+        if (newimg == null) {
+          this.video.VideoPath = null;
+          this.videoForm.showVideoPath = null
+        } else if (newimg == "") {
+          this.video.VideoPath = null;
+          this.videoForm.showVideoPath = null
+        } else {
+          this.videoForm.showVideoPath = process.env.VUE_APP_BASE_API + newimg;
+          this.video.VideoPath = process.env.VUE_APP_BASE_API + newimg;
+        }
+      }
+    },
+    item: {
+      handler(newimg, oldimg) {
+        this.uploadbtn = true;
+        this.items = this.item;
+      }
+    },
+    type: {
+      handler(newimg, oldimg) {
+        this.filedata.type = this.type;
+      }
+    }
+  },
+  methods: {
+    uploadVideoProcess(event, file, fileList) {
+      this.progressFlag = true; // 显示进度条
+      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
+      if (this.loadProgress >= 100) {
+        this.loadProgress = 100;
+        setTimeout(() => {
+          this.progressFlag = false;
+        }, 1000); // 一秒后关闭进度条
+      }
+    },
+    loadJsonFromFile(file, fileList) {
+      const reader = new FileReader();
+      this.previews.data = file.raw;
+      this.videoForm.showVideoPath = URL.createObjectURL(file.raw);
+      reader.readAsDataURL(file.raw);
+      reader.onload = () => {
+        // this.options.img = reader.result;
+      };
+    },
+    submitUpload() {
+      this.uploadbtn = false;
+      this.$refs.upload.submit();
+    },
+    handlePreview(file) { },
+    // 编辑头像
+    editCropper() {
+      this.openimg = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    // 覆盖默认的上传行为
+    requestUpload() { },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      const reader = new FileReader();
+      this.previews.data = file;
+      this.videoForm.showVideoPath = URL.createObjectURL(file);
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        // this.options.img = reader.result;
+      };
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code == 200) {
+        this.video.VideoPath = process.env.VUE_APP_BASE_API + res.imgUrl;
+        this.$emit("imgUrl", res.imgUrl);
+        this.$modal.msgSuccess("上传视频成功");
+        this.openimg = false;
+      } else {
+        this.$message.error(res.msg);
+      }
+      this.uploadbtn = true;
+    },
+    // 上传图片
+    uploadImg() {
+      this.uploadbtn = true;
+      let formData = new FormData();
+      if (this.previews.data) {
+        formData.append("file", this.previews.data);
+        formData.append("type", this.filedata.type);
+        this.$modal.msgSuccess("上传视频中,请耐心等待");
+        this.uploadbtn = false;
+        uploadFilefm(formData).then(response => {
+          if (response.code == 200) {
+            this.video.VideoPath =
+              process.env.VUE_APP_BASE_API + response.imgUrl;
+            this.items.itemDirectoryUrl = response.imgUrl;
+            this.$emit("item", JSON.stringify(this.items));
+
+            this.openimg = false;
+          } else {
+            setTimeout(e => {
+              this.openimg = false;
+            }, 1000);
+          }
+          this.uploadbtn = true;
+        });
+      } else {
+        this.openimg = false;
+      }
+      // this.videoForm.showVideoPath = null;
+      this.previews.data = null;
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.visible = false;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.title {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
+
+.avatar-upload-preview {
+  position: absolute;
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  width: 300px;
+  height: 300px;
+  border-radius: 0%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
+
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  background: #fafafa;
+  width: 100px;
+  height: 100px;
+}
+
+.user-info-head:hover:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+
+.wihi {
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
+}
+
+.wihi:hover:after {
+  transform: translate(50%, 50%);
+}
+</style>