修改上传视频的部分样式

src/views/articleManagement/videoCreate.vue

@@ -131,24 +131,26 @@
     </div>
     <div class="common-card a-card-margin-top">
       <div class="information-title">视频内容</div>
-      <div>上传视频</div>
-      <div>
+      <div style="margin-bottom: 10px;">上传视频</div>
+      <div style="margin-bottom: 10px;">
         <a-upload
           :customRequest="uploadOssVideoFile"
           list-type="picture"
           :default-file-list="defaultVideoFileList"
           :remove="removeOssVideoFile"
+          class="upload-list-inline"
         >
           <a-button> <a-icon type="upload" />Upload </a-button>
         </a-upload>
       </div>
-      <div>上传封面</div>
+      <div style="margin-bottom: 10px;">上传封面</div>
       <div>
         <a-upload
           :customRequest="uploadOssImageFile"
           list-type="picture"
           :default-file-list="defaultImageFileList"
           :remove="removeOssImageFile"
+          class="upload-list-inline"
         >
           <a-button> <a-icon type="upload" />Upload </a-button>
         </a-upload>
@@ -185,39 +187,39 @@
 </template>
 
 <script>
-const OSS = require("ali-oss");
+const OSS = require('ali-oss');
 import {
   formatePathParams,
   formateStringDate,
-  formateDateToString
-} from "@/filters";
+  formateDateToString,
+} from '@/filters';
 export default {
-  name: "videoCreate",
+  name: 'videoCreate',
   props: {},
   components: {},
   data() {
     return {
       previewVisible: false,
-      videoUrl: "",
-      faceUrl: "",
-      content: "",
-      form: this.$form.createForm(this, { name: "articleCreate" }),
+      videoUrl: '',
+      faceUrl: '',
+      content: '',
+      form: this.$form.createForm(this, { name: 'articleCreate' }),
       articleParentClassArr: [],
       articleChildClassArr: [],
       engineerTypeArray: [],
       articleParentClass: {},
       articleChildClass: {},
-      engineerType: "",
-      learnDate: "",
-      optionType: "",
-      description: "",
+      engineerType: '',
+      learnDate: '',
+      optionType: '',
+      description: '',
       bodyStyle: {
-        img: "{max-width:100%;width: auto;height: auto;}",
-        video: "{max-width:100%;width: auto;height: auto;}",
-        color: "red"
+        img: '{max-width:100%;width: auto;height: auto;}',
+        video: '{max-width:100%;width: auto;height: auto;}',
+        color: 'red',
       },
       defaultVideoFileList: [],
-      defaultImageFileList: []
+      defaultImageFileList: [],
     };
   },
   created() {
@@ -233,20 +235,20 @@ export default {
       await this.getArticleParentClass();
       await this.getEngineersWork();
       let type = this.$route.query.type;
-      this.optionType = type ? type : "create";
+      this.optionType = type ? type : 'create';
       // 判断是新增文章还是编辑文章
-      if ("edit" === type) {
-        console.log("---edit---");
+      if ('edit' === type) {
+        console.log('---edit---');
         await this.getArticleContent();
-      } else if ("create" === type) {
-        console.log("---create---");
+      } else if ('create' === type) {
+        console.log('---create---');
       }
     },
     // 查询文章分类父级
     getArticleParentClass() {
       this.$_http
         .get(this.$_API.INTERFACE_GET_CATEGORIES)
-        .then(res => {
+        .then((res) => {
           this.articleParentClassArr = res.data;
           this.loading = false;
         })
@@ -267,12 +269,12 @@ export default {
             pathParamsData
           )
         )
-        .then(res => {
+        .then((res) => {
           if (res && res.data.length !== 0) {
             this.articleChildClassArr = res.data;
             this.articleChildClass = this.articleChildClassArr[0];
             this.form.setFieldsValue({
-              articleChildClass: this.articleChildClass.name
+              articleChildClass: this.articleChildClass.name,
             });
           }
           this.loading = false;
@@ -285,8 +287,8 @@ export default {
     async getEngineersWork() {
       await this.$_http
         .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
-        .then(res => {
-          this.engineerTypeArray = [{ name: "不限", id: "" }, ...res.data];
+        .then((res) => {
+          this.engineerTypeArray = [{ name: '不限', id: '' }, ...res.data];
           this.engineerType = this.engineerTypeArray[0];
         });
     },
@@ -297,7 +299,7 @@ export default {
       // 子类选项清空
       this.articleChildClassArr = [];
       this.form.setFieldsValue({
-        articleChildClass: ""
+        articleChildClass: '',
       });
       // 获取子类的值
       this.getArticleChildClass();
@@ -315,7 +317,7 @@ export default {
       this.learnDate = dateString;
     },
     handleSubmitBtnFun() {
-      document.getElementById("articleCreateSubmit").click();
+      document.getElementById('articleCreateSubmit').click();
     },
     // 查询文章内容
     getArticleContent() {
@@ -324,8 +326,8 @@ export default {
         .get(
           formatePathParams(this.$_API.INTERFACE_GET_MATERIALS, pathParamsData)
         )
-        .then(res => {
-          console.log("----" + JSON.stringify(res));
+        .then((res) => {
+          console.log('----' + JSON.stringify(res));
           this.initEditArticleForm(res.data);
           this.loading = false;
         })
@@ -334,13 +336,13 @@ export default {
         });
     },
     initEditArticleForm(item) {
-      console.log("--------" + JSON.stringify(item));
+      console.log('--------' + JSON.stringify(item));
       //   文章标题
       this.form.setFieldsValue({
-        name: item.name
+        name: item.name,
       });
       //   文章描述
-      this.description = item.description ? item.description : "";
+      this.description = item.description ? item.description : '';
       // 文章分类-父类：
       this.articleParentClass = item.rootMaterialCategory;
       this.getArticleChildClass(); // 获取子类列表的值
@@ -359,70 +361,70 @@ export default {
       let learnDate = item.tags.length > 0 ? item.tags[0] : null;
       // 必学日期
       this.learnDate = learnDate ? formateStringDate(learnDate) : null;
-      console.log("编辑初始化时间为YYYY-MM-DD", this.learnDate, learnDate);
+      console.log('编辑初始化时间为YYYY-MM-DD', this.learnDate, learnDate);
       // 文章内容
       this.content = item.contents;
     },
     // 提交表单
     handleSubmit(e) {
       e.preventDefault();
-      if ("create" === this.optionType) {
-        console.log("创建文章");
+      if ('create' === this.optionType) {
+        console.log('创建文章');
         this.createArtical();
-      } else if ("edit" === this.optionType) {
-        console.log("更新文章");
+      } else if ('edit' === this.optionType) {
+        console.log('更新文章');
         this.updateArtical();
       }
     },
     createArtical() {
       this.form.setFieldsValue({
-        articleParentClass: this.articleParentClass.name
+        articleParentClass: this.articleParentClass.name,
       });
       this.form.setFieldsValue({
-        articleChildClass: this.articleChildClass.name
+        articleChildClass: this.articleChildClass.name,
       });
       this.form.setFieldsValue({
-        engineerType: this.engineerType.name
+        engineerType: this.engineerType.name,
       });
       this.form.validateFields((err, values) => {
         if (!err) {
           // 新建文章
           let that = this;
           that.$confirm({
-            title: "新建文章",
+            title: '新建文章',
             content: `确认新建文章吗？`,
-            okText: "确认",
-            cancelText: "取消",
+            okText: '确认',
+            cancelText: '取消',
             onOk() {
               that.loading = true;
               let params = {
                 categoryid: that.articleChildClass.id,
-                engineertypeid: that.engineerType.id
+                engineertypeid: that.engineerType.id,
               };
               let tag = formateDateToString(that.learnDate);
               let links = [];
               let contentObj = {
                 faceUrl: that.faceUrl,
-                videoUrl: that.videoUrl
+                videoUrl: that.videoUrl,
               };
               let bodyParams = {
                 name: values.name,
                 description: values.description,
-                type: "VIDEO",
+                type: 'VIDEO',
                 contents: JSON.stringify(contentObj),
                 tags: tag ? [tag] : [],
                 engineerTypes: [that.engineerType.id],
-                links: links
+                links: links,
               };
               that.$_http
                 .post(that.$_API.INTERFACE_POST_ADMIN_MATERIALS, bodyParams, {
-                  params
+                  params,
                 })
                 .then(() => {
-                  that.$message.success("新建文章成功");
+                  that.$message.success('新建文章成功');
                 });
             },
-            onCancel() {}
+            onCancel() {},
           });
         }
       });
@@ -434,34 +436,34 @@ export default {
           // 更新文章
           let that = this;
           that.$confirm({
-            title: "更新文章",
+            title: '更新文章',
             content: `确认更新文章吗？`,
-            okText: "确认",
-            cancelText: "取消",
+            okText: '确认',
+            cancelText: '取消',
             onOk() {
               that.loading = true;
               let params = {
                 categoryid: that.articleChildClass.id,
-                engineertypeid: that.engineerType.id
+                engineertypeid: that.engineerType.id,
               };
               let tag = formateDateToString(that.learnDate);
               let links = [];
               let contentObj = {
                 faceUrl: that.faceUrl,
-                videoUrl: that.videoUrl
+                videoUrl: that.videoUrl,
               };
               let bodyParams = {
                 id: that.$route.query.id,
                 name: values.name,
                 description: values.description,
-                type: "VIDEO",
+                type: 'VIDEO',
                 contents: JSON.stringify(contentObj),
                 tags: tag ? [tag] : [],
                 engineerTypes: [that.engineerType.id],
-                links: links
+                links: links,
               };
               console.log(
-                "保存修改日期格式为YYYYMMDD",
+                '保存修改日期格式为YYYYMMDD',
                 bodyParams.tags,
                 that.learnDate
               );
@@ -473,14 +475,14 @@ export default {
                   ),
                   bodyParams,
                   {
-                    params
+                    params,
                   }
                 )
                 .then(() => {
-                  that.$message.success("更新文章成功");
+                  that.$message.success('更新文章成功');
                 });
             },
-            onCancel() {}
+            onCancel() {},
           });
         }
       });
@@ -489,39 +491,39 @@ export default {
       let that = this;
       let file = fileData.file;
 
-      var index = file.name.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
+      var index = file.name.indexOf('.'); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
       var subfix = file.name.substring(index); //截断"."之前的，得到后缀
-      if (subfix != ".mp4") {
+      if (subfix != '.mp4') {
         fileData.onError();
-        this.$message.error("只能上传mp4格式的文件");
+        this.$message.error('只能上传mp4格式的文件');
         return;
       }
 
-      let bucket = "jtxt-file-public";
-      let ossPath = "file/";
+      let bucket = 'jtxt-file-public';
+      let ossPath = 'file/';
       let res = await that.$_http.get(
         that.$_API.INTERFACE_GET_ASSUME_OSS_WRITER
       );
-      console.log("--oss-writer--" + JSON.stringify(res));
+      console.log('--oss-writer--' + JSON.stringify(res));
       const client = new OSS({
         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: "oss-cn-beijing",
+        region: 'oss-cn-beijing',
         // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
         accessKeyId: res.data.accessKeyId,
         accessKeySecret: res.data.accessKeySecret,
         // 从STS服务获取的安全令牌（SecurityToken）。
         stsToken: res.data.securityToken,
         // 填写Bucket名称。
-        bucket: bucket
+        bucket: bucket,
       });
       try {
-        client.put(ossPath + file.name, file).then(res => {
+        client.put(ossPath + file.name, file).then((res) => {
           console.log(res);
           let upFile = {
             uid: this.getUid(),
             name: file.name,
-            status: "done",
-            url: res.url
+            status: 'done',
+            url: res.url,
           };
           that.videoUrl = res.url;
           that.defaultVideoFileList.push(upFile);
@@ -543,31 +545,31 @@ export default {
     async uploadOssImageFile(fileData) {
       let that = this;
       let file = fileData.file;
-      let bucket = "jtxt-file-public";
-      let ossPath = "file/";
+      let bucket = 'jtxt-file-public';
+      let ossPath = 'file/';
       let res = await that.$_http.get(
         that.$_API.INTERFACE_GET_ASSUME_OSS_WRITER
       );
-      console.log("--oss-writer--" + JSON.stringify(res));
+      console.log('--oss-writer--' + JSON.stringify(res));
       const client = new OSS({
         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: "oss-cn-beijing",
+        region: 'oss-cn-beijing',
         // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
         accessKeyId: res.data.accessKeyId,
         accessKeySecret: res.data.accessKeySecret,
         // 从STS服务获取的安全令牌（SecurityToken）。
         stsToken: res.data.securityToken,
         // 填写Bucket名称。
-        bucket: bucket
+        bucket: bucket,
       });
       try {
-        client.put(ossPath + file.name, file).then(res => {
+        client.put(ossPath + file.name, file).then((res) => {
           console.log(res);
           let upFile = {
             uid: this.getUid(),
             name: file.name,
-            status: "done",
-            url: res.url
+            status: 'done',
+            url: res.url,
           };
           that.faceUrl = res.url;
           that.defaultImageFileList.push(upFile);
@@ -579,7 +581,7 @@ export default {
       }
     },
     getUid() {
-      let uid = "";
+      let uid = '';
       for (let i = 0; i < 5; i++) {
         uid += Math.floor(Math.random() * 10);
       }
@@ -606,10 +608,10 @@ export default {
     // 截取视频第一帧
     findvideocover(file) {
       file.src = file.url; // url地址 url跟 视频流是一样的
-      console.log("-----filesrc-" + file.src);
-      var canvas = document.createElement("canvas"); // 获取 canvas 对象
-      const ctx = canvas.getContext("2d"); // 绘制2d
-      file.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
+      console.log('-----filesrc-' + file.src);
+      var canvas = document.createElement('canvas'); // 获取 canvas 对象
+      const ctx = canvas.getContext('2d'); // 绘制2d
+      file.crossOrigin = 'anonymous'; // 解决跨域问题，也就是提示污染资源无法转换视频
       file.currentTime = 1; // 第一帧
       file.oncanplay = () => {
         canvas.width = file.clientWidth; // 获取视频宽度
@@ -617,8 +619,8 @@ export default {
         // 利用canvas对象方法绘图
         ctx.drawImage(file, 0, 0, file.clientWidth, file.clientHeight);
         // 转换成base64形式
-        this.faceUrl = canvas.toDataURL("image/png"); // 截取后的视频封面
-        console.log("----faceUrl--" + this.faceUrl);
+        this.faceUrl = canvas.toDataURL('image/png'); // 截取后的视频封面
+        console.log('----faceUrl--' + this.faceUrl);
         // file.url = this.imgsrc;
       };
     },
@@ -629,8 +631,8 @@ export default {
     // 关闭预览
     closepreview() {
       this.previewVisible = false;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -643,10 +645,23 @@ export default {
     height: auto;
   }
 }
+
+/* tile uploaded pictures */
+.upload-list-inline .ant-upload-list-item {
+  float: left;
+  width: 200px;
+  margin-right: 8px;
+}
+.upload-list-inline .ant-upload-animate-enter {
+  animation-name: uploadAnimateInlineIn;
+}
+.upload-list-inline .ant-upload-animate-leave {
+  animation-name: uploadAnimateInlineOut;
+}
 </style>
 
 <style lang="less" scoped>
-@import "~@/styles/common/variable.less";
+@import '~@/styles/common/variable.less';
 .app-container {
   .information-title {
     font-size: 18px;