修复文件上传的一些问题

vue/full/src/api/file/index.js

@@ -1,4 +1,4 @@
-import {GetApi} from "@/api/request"
+import {GetApi, PostApi} from "@/api/request"
 
 export const getToken = new GetApi(
     '/file/getToken',
@@ -7,3 +7,5 @@ export const getToken = new GetApi(
 )
 
 export const deleteUpload = new GetApi('/file/delete', url => ({params: {url: encodeURIComponent(url)}}))
+
+export const deleteUploadBatch = new PostApi('/file/deleteBatch')

vue/full/src/component/Upload/Qiniu.vue

@@ -4,6 +4,7 @@
         :uploaded-file-list="uploadedFileList"
         :limit="limit"
         :multiple="multiple"
+        :disabled="disabled"
         :http-request="httpRequest"
         :before-upload="beforeUpload"
         @exceed="onExceed"
@@ -100,14 +101,17 @@ export default {
         },
         //移除
         onRemove(file) {
-            //若不是新上传的，触发remove事件
+            if (file.status !== 'success') return
+
+            //不是本次上传的
             if (!file.raw) {
-                this.$emit('remove', {url: file.downloadUrl.replace(fileConfig.storePrefix, '')})
+                const key = file.downloadUrl.replace(fileConfig.storePrefix, '')
+                return this.$emit('remove', {key, isNew: false})
             }
+
             //移除本次新上传的文件时，删除OSS上的文件
-            else if (file.response && !file.response.err) {
             deleteUpload.request(file.raw.key)
-            }
+            this.$emit('remove', {key: file.raw.key, isNew: true})
         },
 
         //上传前过滤文件，并根据文件类型修改缩略图

vue/full/src/mixin/docDetailMixin.js

@@ -9,7 +9,7 @@ import DocSteps from '@/component/biz/doc/DocSteps'
 import QiniuUpload from '@/component/Upload/Qiniu'
 import {isEmpty, mergeObj} from '@/util'
 import {auth} from "@/util/auth"
-import {deleteUpload} from "@/api/file"
+import {deleteUploadBatch} from "@/api/file"
 import {elAlert, elConfirm, elPrompt, elSuccess} from "@/util/message"
 import {closeCurrentPage} from "@/util/route"
 
@@ -50,8 +50,8 @@ export default {
                 remark: null,
                 data: [],
                 imageList: [],
-                uploadImageList: [],
-                deleteImageList: []
+                uploadImageList: [],//新上传文件的key数组
+                deleteImageList: [] //被删除的旧上传文件的key数组
             },
             rules: {}
         }
@@ -237,17 +237,8 @@ export default {
             return this.init(this.form.id)
         },
 
-        //关闭页面
+        //关闭页面并跳转到列表页
         close() {
-            //删除未保存的上传附件
-            const deleteArr = []
-            if (this.form.uploadImageList.length > 0) {
-                deleteArr.push(...this.form.uploadImageList.map(i => i.url))
-            }
-            if (deleteArr.length > 0) {
-                deleteUpload.request(deleteArr).catch(e => ({}))
-            }
-
             return closeCurrentPage(this.getTablePageUrl())
         },
         //获取列表页的地址
@@ -262,7 +253,14 @@ export default {
             this.$store.commit('needSearch/emit', this.getTablePageUrl())
         },
 
-        //附件操作
+        /*附件操作*/
+        //删除未保存的上传附件
+        clearUnusedFile() {
+            const deleteArr = this.form.uploadImageList.map(i => i.url)
+            if (deleteArr.length > 0) {
+                deleteUploadBatch.request(deleteArr).catch(e => ({}))
+            }
+        },
         uploadSuccess(file, res) {
             this.form.uploadImageList.push({
                 url: res.key,
@@ -272,15 +270,23 @@ export default {
             })
             this.attachmentSortSeed++
         },
-        removeUpload(file) {
-            this.form.deleteImageList.push(file.url)
-            const index = this.form.uploadImageList.findIndex(i => i.url === file.url)
-            if (index > -1) this.form.uploadImageList.splice(index, 1)
+        removeUpload({key, isNew}) {
+            //被删除的文件不是本次上传的
+            if (!isNew) {
+                return this.form.deleteImageList.push(key)
+            }
+
+            const index = this.form.uploadImageList.findIndex(i => i.url === key)
+            index > -1 && this.form.uploadImageList.splice(index, 1)
         }
     },
 
     mounted() {
         this.loading = false
         if (this.type !== 'add') return this.init(this.id)
+    },
+
+    beforeDestroy() {
+        this.clearUnusedFile()
     }
 }

vue/full/src/view/example/component/uploadPage.vue

@@ -5,7 +5,8 @@
             图片使用<a href="https://github.com/sachinchoolur/lightgallery.js" target="_blank">lightgallery</a>预览，
             非图片类型的文件使用<a href="https://github.com/kekingcn/kkFileView" target="_blank">kkFileView</a>预览
         </div>
-        <qiniu-upload :file-list="fileList"/>
+        <qiniu-upload :file-list="fileList" @success="success" @remove="remove"/>
+
         <div class="tip-row">原始使用axios的上传</div>
         <input @change="change" type="file">
     </div>
@@ -14,6 +15,7 @@
 <script>
 import QiniuUpload from "@/component/Upload/Qiniu"
 import request from "@/api/request"
+import {deleteUploadBatch} from "@/api/file"
 
 export default {
     name: "uploadExample",
@@ -35,11 +37,22 @@ export default {
                     url: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
                     name: '3.jpg'
                 },
-            ]
+            ],
+            uploadedKeys: []
         }
     },
 
     methods: {
+        success(file, res) {
+            this.uploadedKeys.push(res.key)
+        },
+        remove({key, isNew}) {
+            if (!isNew) return
+
+            const index = this.uploadedKeys.findIndex(i => i.url === key)
+            index > -1 && this.uploadedKeys.splice(index, 1)
+        },
+
         change(e) {
             let file = e.target.files[0]
             let param = new FormData()
@@ -59,6 +72,12 @@ export default {
                 .post('/test/upload', param, {headers: {"Content-Type": "multipart/form-data"}})
                 .then(({data}) => alert(data))
         }
+    },
+
+    beforeDestroy() {
+        if (this.uploadedKeys.length > 0) {
+            deleteUploadBatch.request(this.uploadedKeys)
+        }
     }
 }
 </script>