merge

src/page/content/components/uploadVue/uploadFolder.vue

 <template>
-  <form enctype="multipart/form-data">
-    选择多个文件：
-    <input type="file" name="files" multiple="multiple"  @change="getFiles($event)"/>
-    <br />选择文件夹，遍历该文件夹下所有文件：
-    <input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory  />
+  <el-form enctype="multipart/form-data">
+    选择多文件：
+    <input type="file" name="files" multiple="multiple" @change="getFiles($event)" />
+    <br />选择文件夹：
+    <input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory />
     <br />
-    <a @click.stop="upload">上传</a>
-  </form>
+    <ul class="el-upload-list el-upload-list--text">
+      <li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i">
+        {{item.name}}
+        <span>
+          <el-button size="mini" type="text">
+            <i @click="remove(item)" class="el-icon-close"></i>
+          </el-button>
+        </span>
+      </li>
+    </ul>
 
-  <!-- <div>
-    {{files}}
-    选择多个文件：
-    <input @change="getFiles($event)"  type="file" multiple="multiple" />
-    <br />选择文件夹，遍历该文件夹下所有文件：
-    <input @change="getFiles($event)" type="file" webkitdirectory mozdirectory />
-    <br />
-    <button @click.stop="upload">上传</button>
-  </div> -->
+    <el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button>
+  </el-form>
 </template>
 
 <script>
 import axios from "axios";
 export default {
   name: "UploadFileVue",
+   props:{
+    fileList:{
+      type:Array,
+      default:[]
+    },
+  },
   data() {
     return {
-      files: []
+      fullscreenLoading: false,
+      files: [
+        
+      ]
     };
   },
+  watch: {
+    fileList(newName, oldName) {
+      console.log(newName)
+      this.files = newName
+      // ...
+    }
+  },
   computed: {
     headers() {
       return {
@@ -35,23 +52,34 @@ export default {
       };
     }
   },
+  
   methods: {
+    remove(data) {
+      const children = this.files;
+      const index = children.findIndex(d => d.name === data.name);
+      children.splice(index, 1);
+    },
     getFiles: function(event) {
-    console.log(event)
+      console.log(event);
       var files = event.target.files;
       for (var i = 0; i < files.length; i++) {
         this.files.push(files[i]);
       }
-      console.log(this.files,'--')
+      console.log(this.files, "--");
     },
     upload: function() {
+        const loading = this.$loading({
+          lock: true,
+          text: '上传中，请稍候。。。',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
       console.log(this.files);
-      // alert("111")
       var formData = new FormData();
       for (var i = 0; i < this.files.length; i++) {
         formData.append("file", this.files[i]);
       }
-        console.log(formData)
+      console.log(formData);
       let _this = this;
       _this
         .$https(
@@ -63,19 +91,18 @@ export default {
           formData
         )
         .then(res => {
+           loading.close();
           let resData = res.data;
           console.log(res);
-
-          // this.loading = false
           if (resData.resultCode == "200") {
             _this.$message.success("上传成功！");
-            // const data = resData.data.fileList;
-            // let newArray = data.map((item) => item.id);
-            // let editArray =[]
-            // if(this.fileList.length){
-            //   editArray = this.fileList.map(item=>item.id)
-            // }
-            // this.$emit("videoList", [...newArray,...editArray]);
+            const data = resData.data.fileList;
+            let newArray = data.map((item) => item.id);
+            let editArray =[]
+            if(this.files.length){
+              editArray = this.files.map(item=>item.id)
+            }
+            this.$emit("videoList", [...newArray,...editArray]);
           } else {
             _this.$message.error(resData.msg || resData.message);
           }
@@ -84,32 +111,6 @@ export default {
           console.log(err);
           _this.$message.error(err.msg || err.message);
         });
-
-      //   axios({
-      //     method: "post",
-      //     url: "http://111.203.232.175:8088/mall/file/video/content/upload",
-      //     data: {
-      //       formData
-      //     },
-      //     headers: {
-      //       Authorization: localStorage.getItem("backToken") || ""
-      //     },
-      //     responseType: "blob"
-      //   }).then(res => {
-      //     console.log(res);
-      //     alert('文件夹上传成功！')
-      //   });
-        // this.$axios.post("http://111.203.232.175:8088/mall/file/video/content/upload", formData, {
-        // 	headers: {
-        //       //   'Content-Type': 'multipart/form-data',
-        //         Authorization: localStorage.getItem("backToken") || "",
-        // 	}
-        // }).then(function(response) {
-        //     console.log(respose)
-        // 	// 请求成功
-        // }, function(err) {
-
-        // })
     }
   }
 };

src/page/content/video/content/add.vue

@@ -16,12 +16,7 @@
           :inline="true"
           label-position="top"
         >
-        <!-- <el-form-item label="多文件上传测试"  >
-                <div style="color:red;">
-                  （可支持word、PDF、ppt、视频类型文件及图片上传）
-                </div>
-                <upload-folder ></upload-folder>
-            </el-form-item> -->
+      
           <el-form-item label="视频名称" prop="name" class="w100">
             <el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
           </el-form-item>
@@ -77,10 +72,17 @@
           <el-form-item label="视频缩略图" required>
             <upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl"></upload-img>
           </el-form-item>
-          <el-form-item label="上传视频" required>
+          <!-- <el-form-item label="上传视频" required>
             <p style="color:red">（支持上传多个视频及视频文件夹，视频语言支持汉语、蒙语、藏语、维吾尔语、英语，视频命名规定：视频名称+语言）</p>
             <upload-file :fileList="ruleForm.videoList" @videoList="videoList"></upload-file>
-          </el-form-item>
+          </el-form-item> -->
+
+            <el-form-item label="上传视频" required >
+                <div style="color:red;">
+                  （支持上传多个视频及视频文件夹，视频语言支持汉语、蒙语、藏语、维吾尔语、英语，视频命名规定：视频名称+语言）
+                </div>
+                <upload-folder :fileList="ruleForm.videoList" @videoList="videoList" ></upload-folder>
+            </el-form-item>
         </el-form>
         <!--新增弹框-->
         <el-dialog