处理删除文件逻辑

src/views/articleManagement/articleCreate.vue

@@ -56,7 +56,8 @@
               <a-select-option
                 v-for="(item, index) in articleParentClassArr"
                 :key="index"
-              >{{ articleParentClassArr[index].name }}</a-select-option>
+                >{{ articleParentClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="文章子类">
@@ -80,7 +81,8 @@
               <a-select-option
                 v-for="(item, index) in articleChildClassArr"
                 :key="index"
-              >{{ articleChildClassArr[index].name }}</a-select-option>
+                >{{ articleChildClassArr[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="工种类别">
@@ -97,7 +99,8 @@
               <a-select-option
                 v-for="(item, index) in engineerTypeArray"
                 :key="index"
-              >{{ engineerTypeArray[index].name }}</a-select-option>
+                >{{ engineerTypeArray[index].name }}</a-select-option
+              >
             </a-select>
           </a-form-item>
           <a-form-item label="必学日期:">
@@ -119,7 +122,9 @@
             />
           </a-form-item>
           <a-form-item v-show="false" :wrapper-col="{ span: 20, offset: 10 }">
-            <a-button id="articleCreateSubmit" type="primary" html-type="submit">提交</a-button>
+            <a-button id="articleCreateSubmit" type="primary" html-type="submit"
+              >提交</a-button
+            >
           </a-form-item>
         </a-form>
       </div>
@@ -130,16 +135,20 @@
       <div>
         <div>上传附件</div>
         <div>
-          <a-upload :customRequest="uploadOssFile" :default-file-list="defaultFileList">
-            <a-button>
-              <a-icon type="upload" />Upload
-            </a-button>
+          <a-upload
+            :customRequest="uploadOssFile"
+            :default-file-list="defaultFileList"
+            :remove="removeOssFile"
+          >
+            <a-button> <a-icon type="upload" />Upload </a-button>
           </a-upload>
         </div>
       </div>
       <div class="submit-row">
         <a-button type="primary" @click="handleSubmitBtnFun">提交</a-button>
-        <a-button :style="{ marginLeft: '160px' }" @click="preview">预览</a-button>
+        <a-button :style="{ marginLeft: '160px' }" @click="preview"
+          >预览</a-button
+        >
       </div>
     </div>
     <!-- 预览弹出框 -->
@@ -340,6 +349,27 @@ export default {
       console.log("编辑初始化时间为YYYY-MM-DD", this.learnDate, learnDate);
       // 文章内容
       this.content = item.contents;
+      // 附件内容
+      item.links.forEach(element => {
+        let upFile = {
+          uid: this.getUid(),
+          name: this.getUrlName(element),
+          status: "done",
+          url: element
+        };
+        this.defaultFileList.push(upFile);
+      });
+      console.log(this.defaultFileList);
+    },
+    // 截取路径名字
+    getUrlName(url) {
+      let strArr = url.split("/");
+      console.log(strArr);
+      let fileName = strArr[strArr.length - 1];
+      console.log(fileName);
+      fileName = decodeURIComponent(fileName);
+      console.log(fileName);
+      return fileName;
     },
     // 提交表单
     handleSubmit(e) {
@@ -426,6 +456,7 @@ export default {
               that.defaultFileList.forEach(element => {
                 links.push(element.url);
               });
+              console.log(links);
               let bodyParams = {
                 id: that.$route.query.id,
                 name: values.name,
@@ -485,7 +516,7 @@ export default {
           client.put(ossPath + file.name, file).then(res => {
             console.log(res);
             let upFile = {
-              uid: this.defaultFileList.length + 1,
+              uid: this.getUid(),
               name: file.name,
               status: "done",
               url: res.url
@@ -499,6 +530,22 @@ export default {
         }
       });
     },
+    removeOssFile(file) {
+      for (let i = 0; i < this.defaultFileList.length; i++) {
+        let tmpFile = this.defaultFileList[i];
+        if (tmpFile.uid === file.uid) {
+          this.defaultFileList.splice(i, 1);
+          return;
+        }
+      }
+    },
+    getUid() {
+      let uid = "";
+      for (let i = 0; i < 5; i++) {
+        uid += Math.floor(Math.random() * 10);
+      }
+      return uid;
+    },
     // 预览
     preview() {
       this.previewVisible = true;

src/views/articleManagement/videoCreate.vue

@@ -137,6 +137,7 @@
           :customRequest="uploadOssVideoFile"
           list-type="picture"
           :default-file-list="defaultVideoFileList"
+          :remove="removeOssVideoFile"
         >
           <a-button> <a-icon type="upload" />Upload </a-button>
         </a-upload>
@@ -147,6 +148,7 @@
           :customRequest="uploadOssImageFile"
           list-type="picture"
           :default-file-list="defaultImageFileList"
+          :remove="removeOssImageFile"
         >
           <a-button> <a-icon type="upload" />Upload </a-button>
         </a-upload>
@@ -516,7 +518,7 @@ export default {
         client.put(ossPath + file.name, file).then(res => {
           console.log(res);
           let upFile = {
-            uid: that.defaultVideoFileList.length + 1,
+            uid: this.getUid(),
             name: file.name,
             status: "done",
             url: res.url
@@ -562,7 +564,7 @@ export default {
         client.put(ossPath + file.name, file).then(res => {
           console.log(res);
           let upFile = {
-            uid: that.defaultImageFileList.length + 1,
+            uid: this.getUid(),
             name: file.name,
             status: "done",
             url: res.url
@@ -576,7 +578,31 @@ export default {
         console.error(e);
       }
     },
-
+    getUid() {
+      let uid = "";
+      for (let i = 0; i < 5; i++) {
+        uid += Math.floor(Math.random() * 10);
+      }
+      return uid;
+    },
+    removeOssVideoFile(file) {
+      for (let i = 0; i < this.defaultVideoFileList.length; i++) {
+        let tmpFile = this.defaultVideoFileList[i];
+        if (tmpFile.uid === file.uid) {
+          this.defaultVideoFileList.splice(i, 1);
+          return;
+        }
+      }
+    },
+    removeOssImageFile(file) {
+      for (let i = 0; i < this.defaultImageFileList.length; i++) {
+        let tmpFile = this.defaultImageFileList[i];
+        if (tmpFile.uid === file.uid) {
+          this.defaultImageFileList.splice(i, 1);
+          return;
+        }
+      }
+    },
     // 截取视频第一帧
     findvideocover(file) {
       file.src = file.url; // url地址 url跟 视频流是一样的