上传文件，列表删除

src/main/vue/src/components/UploadListFile.vue

@@ -12,23 +12,25 @@
                 <span>拖到此处，或</span>
                 <span style="color:#0B9EC0">点击添加</span>
             </p>
-            <input type="file" accept="*" multiple @change='changeInput' />
+            <input type="file" v-if="show" accept="*" multiple
+                @change='changeInput' />
         </div>
 
         <div class="tipInfo" v-html="tipInfo"></div>
 
         <div class="fileList">
-            <upload-file-item v-for="(item,index) in uploadList" :key="'file'+index" :info='item'></upload-file-item>
+            <upload-file-item v-for="(item,index) in uploadList"
+                :key="'file'+index" :info='item'></upload-file-item>
         </div>
     </div>
 
 </template>
 <script>
-import { mapState } from 'vuex'
-import axios from 'axios'
-import UploadFileItem from './UploadFileItem'
+import { mapState } from "vuex";
+import axios from "axios";
+import UploadFileItem from "./UploadFileItem";
 export default {
-    name: 'UploadListFile',
+    name: "UploadListFile",
     props: {
         limitNum: {
             type: Number,
@@ -41,7 +43,7 @@ export default {
 
         tipInfo: {
             type: String,
-            default: ''
+            default: ""
         },
         url: {
             type: String,
@@ -58,7 +60,7 @@ export default {
         needNameList: {
             type: Array,
             default: () => {
-                return []
+                return [];
             }
         }
     },
@@ -67,18 +69,19 @@ export default {
             showUpload: false,
             uploadList: [],
             uploadSucceeList: [],
-            nameList: [],
-        }
+            nameList: []
+        };
     },
     watch: {
         show() {
-            this.uploadList = []
-            this.uploadSucceeList = []
-            this.nameList = []
+            console.log("change");
+            this.uploadList = [];
+            this.uploadSucceeList = [];
+            this.nameList = [];
         }
     },
     computed: {
-        ...mapState(['userInfo']),
+        ...mapState(["userInfo"]),
         tipUploadInfo() {
             var info = {};
             var list = [...this.uploadList];
@@ -88,17 +91,19 @@ export default {
                     break;
                 }
             }
-            return info.name ? ('正在上传' + info.name + '文件 ' + info.progress) : '';
+            return info.name
+                ? "正在上传" + info.name + "文件 " + info.progress
+                : "";
         }
     },
     mounted() {
-        this.disableDragEvent()
+        this.disableDragEvent();
     },
     methods: {
         disableDragEvent() {
-            document.addEventListener('dragenter', this.dragenterEvent, false)
-            document.addEventListener('dragover', this.dragoverEvent)
-            document.addEventListener('drop', this.dropEvent)
+            document.addEventListener("dragenter", this.dragenterEvent, false);
+            document.addEventListener("dragover", this.dragoverEvent);
+            document.addEventListener("drop", this.dropEvent);
         },
         dragenterEvent(e) {
             if (this.disableDrag(e)) {
@@ -110,88 +115,96 @@ export default {
         },
         dropEvent(e) {
             if (this.disableDrag(e)) {
-                this.getFileList(e.dataTransfer.files)
-
+                this.getFileList(e.dataTransfer.files);
             }
-            return false
+            return false;
         },
         disableDrag(e) {
-            const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
+            const dropzone = document.getElementById("upload-area"); // 这个是可拖拽的上传区
 
             if (dropzone === null || !dropzone.contains(e.target)) {
-                e.preventDefault()
-                e.dataTransfer.effectAllowed = 'none'
-                e.dataTransfer.dropEffect = 'none'
-                return false
-            }
-            else {
-                e.preventDefault()
-                e.dataTransfer.effectAllowed = 'copyLink'
-                e.dataTransfer.dropEffect = 'move'
-                return true
+                e.preventDefault();
+                e.dataTransfer.effectAllowed = "none";
+                e.dataTransfer.dropEffect = "none";
+                return false;
+            } else {
+                e.preventDefault();
+                e.dataTransfer.effectAllowed = "copyLink";
+                e.dataTransfer.dropEffect = "move";
+                return true;
             }
         },
         changeInput(e) {
-            this.getFileList(e.srcElement.files)
+            this.getFileList(e.srcElement.files);
         },
         getFileList(FileList) {
-            var list = FileList
+            var list = FileList;
             if (this.hasLimit) {
                 if (list.length + this.uploadList.length > this.limitNum) {
-                    this.$message.warning('文件超出个数');
-                    return
+                    this.$message.warning("文件超出个数");
+                    return;
                 }
             }
             if (window.FileReader) {
                 for (var i = 0; i < list.length; i++) {
-                    var position = list[i].name.split('.')
-                    var lastName = position[position.length - 1]
-                    var singleFileName = list[i].name.substring(0, list[i].name.lastIndexOf("."));
-                    const isJPG = (lastName === 'jpeg' || lastName === 'GPEG' || lastName === 'jpg' || lastName === 'JPG' || lastName === 'png' || lastName === 'PNG' || lastName === 'cr2' || lastName === 'CR2' || lastName == 'NEF' || lastName == 'nef')
+                    var position = list[i].name.split(".");
+                    var lastName = position[position.length - 1];
+                    var singleFileName = list[i].name.substring(
+                        0,
+                        list[i].name.lastIndexOf(".")
+                    );
+                    const isJPG =
+                        lastName === "jpeg" ||
+                        lastName === "GPEG" ||
+                        lastName === "jpg" ||
+                        lastName === "JPG" ||
+                        lastName === "png" ||
+                        lastName === "PNG" ||
+                        lastName === "cr2" ||
+                        lastName === "CR2" ||
+                        lastName == "NEF" ||
+                        lastName == "nef";
                     if (!isJPG) {
-                        this.$message.warning('图片格式错误')
-                    } else if (list[i].type.indexOf('image') == -1) {
-                        this.$message.warning('目前只接受图片类型文件');
-                    }
-                    else if(this.checkName && this.needNameList.indexOf(singleFileName)==-1){
-                          this.$message.warning('文件不在订单中')
-
-                    } 
-                    else if (this.nameList.indexOf(list[i].name) == -1) {
+                        this.$message.warning("图片格式错误");
+                    } else if (list[i].type.indexOf("image") == -1) {
+                        this.$message.warning("目前只接受图片类型文件");
+                    } else if (
+                        this.checkName &&
+                        this.needNameList.indexOf(singleFileName) == -1
+                    ) {
+                        this.$message.warning("文件不在订单中");
+                    } else if (this.nameList.indexOf(list[i].name) == -1) {
                         this.uploadList.push({
                             file: list[i],
                             name: list[i].name,
                             status: 0,
-                            progress: '0%',
-                            error: ''
-                        })
-                        this.nameList.push(list[i].name)
+                            progress: "0%",
+                            error: ""
+                        });
+                        this.nameList.push(list[i].name);
                     }
-
                 }
-                this.startUpload()
+                this.startUpload();
             }
         },
         startUpload() {
             if (this.checkLoadingNum() >= 5) {
-                return
-            }
-            else {
+                return;
+            } else {
                 if (this.checkNoLoadingNum() != 0) {
-                    var newFile = this.getNewFile()
-                    this.uploadFile(newFile.file, newFile.index)
-                    this.startUpload()
+                    var newFile = this.getNewFile();
+                    this.uploadFile(newFile.file, newFile.index);
+                    this.startUpload();
                 }
             }
-
         },
         getNewFile() {
-            var info = {}
+            var info = {};
             var list = [...this.uploadList];
             for (var i = 0; i < list.length; i++) {
                 if (list[i].status == 0) {
                     info.index = i;
-                    info.file = list[i].file
+                    info.file = list[i].file;
                     break;
                 }
             }
@@ -204,8 +217,8 @@ export default {
                 if (item.status == 0) {
                     num++;
                 }
-            })
-            return num
+            });
+            return num;
         },
         checkLoadingNum() {
             var num = 0;
@@ -214,83 +227,83 @@ export default {
                 if (item.status == 1) {
                     num++;
                 }
-            })
-            return num
+            });
+            return num;
         },
         uploadFile(file, index) {
-            this.changeList('status', 1, index)
-            var data = new FormData()
-            data.append('file', file)
+            this.changeList("status", 1, index);
+            var data = new FormData();
+            data.append("file", file);
             axios({
                 url: this.url,
-                method: 'post',
+                method: "post",
                 data: data,
-                onUploadProgress: (progressEvent) => {
-                    var progress = (progressEvent.loaded / progressEvent.total * 100 | 0) - 20
+                onUploadProgress: progressEvent => {
+                    var progress =
+                        (((progressEvent.loaded / progressEvent.total) * 100) |
+                            0) -
+                        20;
                     if (progress < 10) {
-                        progress = 10
+                        progress = 10;
                     }
-                    var complete = progress + '%'
-                    this.changeList('progress', complete, index)
-                    if (complete == '80%') {
-                        this.virtualProgress(index, 80)
+                    var complete = progress + "%";
+                    this.changeList("progress", complete, index);
+                    if (complete == "80%") {
+                        this.virtualProgress(index, 80);
                     }
-                },
-
+                }
             }).then(res => {
                 if (res.data.success) {
-                    this.changeList('progress', '100%', index)
-                    this.changeList('status', 2, index)
-                    this.uploadSucceeList.push(res.data.data[0])
-                    this.$emit('successEvent')
+                    this.changeList("progress", "100%", index);
+                    this.changeList("status", 2, index);
+                    this.uploadSucceeList.push(res.data.data[0]);
+                    this.$emit("successEvent");
+                } else {
+                    this.$message.warning(res.data.error);
+                    this.changeList("error", res.data.error, index);
+                    this.changeList("status", 3, index);
                 }
-                else {
-                    this.$message.warning(res.data.error)
-                    this.changeList('error', res.data.error, index)
-                    this.changeList('status', 3, index)
-                }
-                this.startUpload()
-            })
+                this.startUpload();
+            });
         },
         virtualProgress(index, progress) {
-            var info = { ...this.uploadList[index] }
+            var info = { ...this.uploadList[index] };
             if (info.status == 2) {
-                return
+                return;
             }
-            var progress2 = progress + 2
-            this.changeList('progress', progress2 + '%', index)
+            var progress2 = progress + 2;
+            this.changeList("progress", progress2 + "%", index);
             if (progress2 >= 98) {
-                return
+                return;
             }
             setTimeout(() => {
-                this.virtualProgress(index, progress2)
-            }, 2000)
+                this.virtualProgress(index, progress2);
+            }, 2000);
         },
         changeList(type, value, index) {
-            if (type == 'del') {
-                var list = [...this.uploadList]
-                list.splice(index, 1)
-                this.uploadList = list
-            }
-            else {
-                var info = { ...this.uploadList[index] }
-                info[type] = value
-                this.$set(this.uploadList, index, info)
+            if (type == "del") {
+                var list = [...this.uploadList];
+                list.splice(index, 1);
+                this.uploadList = list;
+            } else {
+                var info = { ...this.uploadList[index] };
+                info[type] = value;
+                if (index < this.uploadList.length) {
+                    this.$set(this.uploadList, index, info);
+                }
             }
-
         }
     },
     beforeDestroy() {
-        this.uploadList = []
-        document.removeEventListener('dragenter', this.dragenterEvent, false)
-        document.removeEventListener('dragover', this.dragoverEvent)
-        document.removeEventListener('drop', this.dropEvent)
-
+        this.uploadList = [];
+        document.removeEventListener("dragenter", this.dragenterEvent, false);
+        document.removeEventListener("dragover", this.dragoverEvent);
+        document.removeEventListener("drop", this.dropEvent);
     },
     components: {
         UploadFileItem
     }
-}
+};
 </script>
 <style lang='less' scoped>
 .dragContent {