小记者 多选上传

src/components/Upload.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="upload">
     <el-upload
+      ref="upload"
       :accept="accept"
       style="width: 500px"
       class="upload-demo"
@@ -16,6 +17,7 @@
       :before-remove="beforeRemove"
       :on-remove="handleRemove"
       :show-file-list="showList ? false : true"
+      multiple
       :headers="{ 'Content-Type': 'multipart/form-data' }"
     >
       <template v-if="styleType === 'upload'">
@@ -113,12 +115,16 @@ export default {
         response.duration = response.file_info_list[0].media_duration
           ? response.file_info_list[0].media_duration
           : 10;
-        this.$message.success("用户上传成功");
-        if (this.fileName) {
-          this.changeFillId(fileList, this.fileName, file);
-        } else {
-          this.changeFillId(fileList, file);
+        if (fileList.every(({ response }) => response?.status)) {
+          this.$refs.upload.clearFiles();
+          this.$message.success("用户上传成功");
+          if (this.fileName) {
+            this.changeFillId(fileList, this.fileName, file);
+          } else {
+            this.changeFillId(fileList, file);
+          }
         }
+
         this.loading.close();
       } else {
         this.fileList = [];

src/views/reporter/components/PublishReport.vue

@@ -50,7 +50,7 @@
       <div
         class="file-item"
         :class="[itemf.type === 'mp4' ? 'file-item-mp4' : '']"
-        v-for="(itemf, indexf) in fileList"
+        v-for="(itemf, indexf) in fileListShow"
         :key="indexf"
         @mouseover="itemf.coverFlag = true"
         @mouseout="itemf.coverFlag = false"
@@ -119,6 +119,7 @@ export default {
       tabsList: [],
       fileIdList: [],
       fileList: [],
+      fileListShow: [],
       labelExamples: ["中英双语", "少儿必读", "3-6 岁"],
       resourceUrl: "", // 课节资源预览地址
       resourceFlag: false,
@@ -134,25 +135,28 @@ export default {
     handleTrim(fild) {
       this[fild] = this[fild].trim();
     },
-    handleAvatarSuccess(fileList, file) {
-      // console.log(file)
-      // fileList.forEach(item => {
-      if (
-        file.response &&
-        file.response.file_info_list &&
-        file.response.file_info_list[0]
-      ) {
-        let index = file.name.lastIndexOf(".");
-        let type = file.name.substring(index + 1).toLowerCase();
-        let obj = {
-          url: file.response.file_info_list[0].file_url,
-          type: this.handleJudgeType(type),
-          coverFlag: false,
-        };
-        this.fileIdList.push(file.response.file_info_list[0].file_id);
-        this.fileList.push(obj);
-      }
-      // });
+    handleAvatarSuccess(fileList) {
+      this.fileList = [];
+      this.fileListShow = [];
+      this.fileIdList = [];
+      fileList.forEach((file) => {
+        if (
+          file.response &&
+          file.response.file_info_list &&
+          file.response.file_info_list[0]
+        ) {
+          let index = file.name.lastIndexOf(".");
+          let type = file.name.substring(index + 1).toLowerCase();
+          let obj = {
+            url: file.response.file_info_list[0].file_url,
+            type: this.handleJudgeType(type),
+            coverFlag: false,
+          };
+          this.fileIdList.push(file.response.file_info_list[0].file_id);
+          this.fileList.push(file);
+          this.fileListShow.push(obj);
+        }
+      });
     },
     // 判断文件类型
     handleJudgeType(type) {
@@ -180,6 +184,7 @@ export default {
       }).then(() => {
         this.fileIdList.splice(i, 1);
         this.fileList.splice(i, 1);
+        this.fileListShow.splice(i, 1);
       });
     },
     // 预览文件

src/views/reporter/components/ReportDetail.vue

@@ -5,7 +5,7 @@
       class="detail-left"
       v-if="infoDetail.res_urls_type && infoDetail.res_urls_type.length > 0"
     >
-      <el-carousel :interval="5000" arrow="always">
+      <el-carousel :autoplay="false" arrow="always">
         <el-carousel-item
           v-for="item in infoDetail.res_urls_type"
           :key="item.url"