upload video

test_client/src/api/cms.js

@@ -1,9 +1,10 @@
 import request from '@/utils/request'
 
-export function getArticleList() {
+export function getArticleList(query) {
   return request({
     url: '/cms/article/',
     method: 'get',
+    params:query
   })
 }
 export function createArticle(data) {
@@ -39,10 +40,11 @@ export function topArticle(id) {
   })
 }
 
-export function getMaterialList() {
+export function getMaterialList(query) {
   return request({
     url: '/cms/material/',
     method: 'get',
+    params:query
   })
 }
 export function createMaterial(data) {

test_client/src/views/material/material.vue

@@ -8,12 +8,7 @@
         class="filter-item"
         @keyup.enter.native="handleFilter"
       />
-          <el-button
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
-            class="filter-item"
-            type="primary"
-            icon="el-icon-search"
-            @click="handleFilter"
-          >搜索</el-button>
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -23,7 +18,8 @@
       >刷新重置</el-button>
     </div>
     <div style="margin-top:6px">
-        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate('文档')">文档</el-button>
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate('视频')">视频</el-button>
     </div>
     <el-table
       v-loading="listLoading"
@@ -38,14 +34,22 @@
       <el-table-column type="index" width="50" />
       <el-table-column label="名称">
         <template slot-scope="scope">
-                <el-link type="primary" :href="scope.row.path" target="_blank" v-if="scope.row.path">{{ scope.row.name }}</el-link>
+          <el-link
+            type="primary"
+            :href="scope.row.path"
+            target="_blank"
+            v-if="scope.row.path"
+          >{{ scope.row.name }}</el-link>
           <span v-else>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
+      <el-table-column align="header-center" label="类型">
+        <template slot-scope="scope">{{ scope.row.type }}</template>
+      </el-table-column>
       <el-table-column align="header-center" label="上传时间">
         <template slot-scope="scope">{{ scope.row.create_time }}</template>
       </el-table-column>
-          <el-table-column align="header-center" label="下载量">
+      <el-table-column align="header-center" label="下载量/播放量">
         <template slot-scope="scope">{{ scope.row.down_count }}</template>
       </el-table-column>
       <el-table-column label="操作">
@@ -74,7 +78,11 @@
       :limit.sync="listQuery.limit"
       @pagination="getList"
     />
-    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'" :close-on-click-modal="false">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType==='update'?'编辑':'新增'"
+      :close-on-click-modal="false"
+    >
       <el-form
         ref="Form"
         :model="material"
@@ -88,19 +96,61 @@
         <el-form-item label="描述" prop="description">
           <el-input v-model="material.description" placeholder="描述" />
         </el-form-item>
-        <el-form-item label="文件" prop="path">
+        <el-form-item label="封面" prop="poster" v-if="material.type=='视频'">
           <el-upload
-  
+            accept=".png, .jpeg, .jpg"
+            :before-upload="beforeUploadP"
+            :action="upUrl"
+            :headers="upHeaders"
+            :on-success="handleSuccessP"
+            :show-file-list="false"
+            class="avatar-uploader"
+          >
+            <img v-if="material.poster" :src="material.poster" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="material.type=='文档'?'文件':'视频'" prop="path">
+          <el-upload
+            v-if="material.type=='文档'"
             :on-preview="handlePreview"
             :on-success="handleSuccess"
             :action="upUrl"
             :headers="upHeaders"
             :limit="1"
             :file-list="fileList"
+            accept=".pdf, .doc, .docx"
           >
-  <el-button size="small" type="primary" >点击上传</el-button>
+            <el-button size="small" type="primary">点击上传</el-button>
-  
+          </el-upload>
-</el-upload>
+          <el-upload
+            v-else
+            class="avatar-uploader"
+            :action="upUrl"
+            :headers="upHeaders"
+            :show-file-list="false"
+            :on-success="handleSuccessV"
+            :before-upload="beforeUploadV"
+            :on-progress="upVideoProgess"
+            accept=".mp4, .m3u8"
+          >
+            <video
+              v-if="material.path"
+              :src="material.path"
+              class="avatar"
+              controls="controls"
+            >您的浏览器不支持视频播放</video>
+            <i
+              v-else
+              class="el-icon-plus avatar-uploader-icon"
+            ></i>
+            <el-progress
+              v-if="videoFlag == true"
+              :percentage="upVideoPercent"
+              style="margin-top:30px;"
+            ></el-progress>
+          </el-upload>
+          <div >请保证视频格式正确，且不超过100M</div>
         </el-form-item>
       </el-form>
 
@@ -111,38 +161,71 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<style>
-import { getMaterialList, createMaterial, updateMaterial, deleteMaterial } from "@/api/cms"
+.avatar-uploader .el-upload {
-import { upUrl, upHeaders} from "@/api/file"
+  border: 1px dashed #d9d9d9;
-import Pagination from "@/components/Pagination"
+  border-radius: 6px;
-import checkPermission from '@/utils/permission'
+  cursor: pointer;
-const defaultmaterial = {
+  position: relative;
-  id:null,
+  overflow: hidden;
-  name:null,
-  description:null,
-  path:null,
-  type:'文档'
 }
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 360px;
+  height: 200px;
+  line-height: 200px;
+  text-align: center;
+}
+.avatar {
+  width: 360px;
+  height: 200px;
+  display: block;
+}
+</style>
+<script>
+import {
+  getMaterialList,
+  createMaterial,
+  updateMaterial,
+  deleteMaterial,
+} from "@/api/cms";
+import { upUrl, upHeaders } from "@/api/file";
+import Pagination from "@/components/Pagination";
+import checkPermission from "@/utils/permission";
+const defaultmaterial = {
+  id: null,
+  name: null,
+  description: null,
+  path: null,
+  poster: null,
+  type: "文档",
+};
 export default {
   components: { Pagination },
   data() {
     return {
       upHeaders: upHeaders(),
       upUrl: upUrl(),
-      materialList: {count:0},
+      materialList: { count: 0 },
-      material:Object.assign({}, defaultmaterial),
+      material: Object.assign({}, defaultmaterial),
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 20
+        limit: 20,
       },
-      dialogVisible:false,
+      dialogVisible: false,
-      dialogType:'create',
+      dialogType: "create",
-      rule1:{
+      rule1: {
         name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        path: [{ required: true, message: "请上传文件", trigger: "blur" }]
+        path: [{ required: true, message: "请上传文件", trigger: "blur" }],
       },
-      fileList:[]
+      fileList: [],
+      videoFlag:false,
+      upVideoPercent:0
     };
   },
   created() {
@@ -152,9 +235,9 @@ export default {
     checkPermission,
     getList() {
       this.listLoading = true;
-      getMaterialList(this.listQuery).then(response => {
+      getMaterialList(this.listQuery).then((response) => {
         if (response.data) {
-          this.materialList = response.data
+          this.materialList = response.data;
         }
         this.listLoading = false;
       });
@@ -162,7 +245,7 @@ export default {
     resetFilter() {
       this.listQuery = {
         page: 1,
-        limit: 20
+        limit: 20,
       };
       this.getList();
     },
@@ -171,13 +254,14 @@ export default {
       this.getList();
     },
     handleDelete(scope) {
-        deleteMaterial(scope.row.id).then(res=>{
+      deleteMaterial(scope.row.id).then((res) => {
-            this.getList()
+        this.getList();
-        })
+      });
     },
-    handleCreate() {
+    handleCreate(val) {
       this.material = Object.assign({}, defaultmaterial);
-      this.fileList = []
+      this.material.type = val;
+      this.fileList = [];
       this.dialogType = "create";
       this.dialogVisible = true;
       this.$nextTick(() => {
@@ -185,63 +269,95 @@ export default {
       });
     },
     handleUpdate(scope) {
-      this.material = Object.assign({}, scope.row) // copy obj
+      this.material = Object.assign({}, scope.row); // copy obj
-      if(this.material.path){
+      if (this.material.path) {
-        this.fileList=[{
+        this.fileList = [
-          name:this.material.name + '.' + this.material.path.split('.')[this.material.path.split('.').length - 1],
+          {
-          url:this.material.path
+            name:
-        }]
+              this.material.name +
+              "." +
+              this.material.path.split(".")[
+                this.material.path.split(".").length - 1
+              ],
+            url: this.material.path,
+          },
+        ];
       }
-      this.dialogType = 'update'
+      this.dialogType = "update";
-      this.dialogVisible = true
+      this.dialogVisible = true;
       this.$nextTick(() => {
-        this.$refs['Form'].clearValidate()
+        this.$refs["Form"].clearValidate();
-      })
+      });
     },
     handlePreview(file) {
-      if ('url' in file){
+      if ("url" in file) {
-        window.open(file.url)
+        window.open(file.url);
-      }else{
+      } else {
-        window.open(file.response.data.path)
+        window.open(file.response.data.path);
       }
-      
+    },
+    beforeUploadP(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1;
+      if (!isLt1M) {
+        this.$message.error("上传封面大小不能超过 1MB!");
+      }
+      return isLt1M;
+    },
+    beforeUploadV(file) {
+      const isLt1M = file.size / 1024 / 1024 < 100;
+      if (!isLt1M) {
+        this.$message.error("上传视频大小不能超过 100MB!");
+      }
+      return isLt1M;
     },
     handleSuccess(response, file, fileList) {
-      this.material.path = response.data.path
+      this.material.path = response.data.path;
+    },
+    handleSuccessV(response, file, fileList) {
+      this.videoFlag = false
+      this.material.path = response.data.path;
+    },
+    handleSuccessP(response, file, fileList) {
+      this.material.poster = response.data.path;
+    },
+    upVideoProgess(event, file, fileList){
+    this.videoFlag = true;
+    this.upVideoPercent = file.percentage.toFixed(0);
     },
     async confirm(form) {
-      this.$refs[form].validate(valid => {
+      this.$refs[form].validate((valid) => {
         if (valid) {
           const isEdit = this.dialogType === "update";
           if (isEdit) {
-            updateMaterial(this.material.id, this.material).then(res => {
+            updateMaterial(this.material.id, this.material).then((res) => {
               if (res.code >= 200) {
                 this.getList();
-                this.dialogVisible = false
+                this.dialogVisible = false;
                 this.$notify({
                   title: "成功",
                   message: "编辑成功",
                   type: "success",
-                  duration: 2000
+                  duration: 2000,
                 });
               }
             });
           } else {
-            createMaterial(this.material).then(res => {
+            createMaterial(this.material)
+              .then((res) => {
                 this.getList();
-                this.dialogVisible = false
+                this.dialogVisible = false;
                 this.$notify({
                   title: "成功",
                   type: "success",
+                });
               })
-              
+              .catch((error) => {});
-            }).catch(error=>{})
           }
         } else {
           return false;
         }
       });
-    }
+    },
-  }
+  },
 };
 </script>

test_client/src/views/news/newscreate.vue

@@ -9,16 +9,16 @@
       status-icon
     >
       <el-form-item label="标题" prop="title">
-    <el-input v-model="Form.title" style="width: 500"></el-input>
+    <el-input v-model="Form.title" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="来源" prop="ifrom">
-    <el-input v-model="Form.ifrom" style="width: 500"></el-input>
+    <el-input v-model="Form.ifrom" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="外部链接" prop="elink" >
-    <el-input v-model="Form.elink" style="width: 500"></el-input>
+    <el-input v-model="Form.elink" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="内容" prop="content" v-show="is_show">
-      <tinymce v-model="Form.content" :height="400" :width="600"/>
+      <tinymce v-model="Form.content" :height="400" width="80%"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>

test_client/src/views/news/newsupdate.vue

@@ -9,16 +9,16 @@
       status-icon
     >
       <el-form-item label="标题" prop="title">
-    <el-input v-model="Form.title" style="width: 500"></el-input>
+    <el-input v-model="Form.title" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="来源" prop="ifrom">
-    <el-input v-model="Form.ifrom" style="width: 500"></el-input>
+    <el-input v-model="Form.ifrom" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="外部链接" prop="elink" >
-    <el-input v-model="Form.elink" style="width: 500"></el-input>
+    <el-input v-model="Form.elink" style="width: 80%"></el-input>
   </el-form-item>
   <el-form-item label="内容" prop="content" v-show="is_show">
-      <tinymce v-model="Form.content" :height="400" :width="600"/>
+      <tinymce v-model="Form.content" :height="400" width="80%"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>