layui動態渲染上傳時在渲染外洗掉已選檔案取消上傳

【layui2.6.8】有多個檔案上傳的組件需要根據后臺資料在頁面加載時動態渲染在一個彈框里面，彈窗從table表格資料的【編輯】按鈕打開，根據點擊行展示不同的檔案，對檔案進行查詢、洗掉、下載等管理，問題：選擇檔案，不上傳，關閉彈窗再打開，剛選的檔案雖然不見了，但依然能上傳那個檔案，需要打開彈窗時清除剛選的檔案，

每個渲染upload.render()在jq的$.each()回圈里用uploadList[]陣列保存，uploadList[i] = upload.render({...省略...})，先看下彈窗大體效果

在choose回呼中有一句this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列，保存選擇的檔案
選擇檔案前，渲染物件里沒有files屬性

選擇檔案后，config有了files屬性

從console的列印結果來看，操作uploadList[i].config.files[findex])可以控制組件里未上傳的檔案，
洗掉檔案操作，直接洗掉整個files不可取：delete uploadList[i].config.files，洗掉檔案后，console.log("一個檔案 清除后：",uploadList[i].config.files[findex])訪問檔案索引直接報錯導致彈框不出現，且上傳操作仍然會調介面，并報錯

上傳介面報錯：

洗掉操作換用delete uploadList[i].config.files[findex]，加了個findex索引，后臺不會報錯，【上傳】按鈕也不會調介面，完成，

附上一個upload.render()的列印結果具體內容，其中選擇過兩個檔案并洗掉，

{
    "config": {
        "accept": "file",
        "exts": "",
        "auto": false,
        "bindAction": {
            "0": {
                "jQuery112406764785200841776": 32
            },
            "length": 1,
            "context": {
                "location": {
                    "ancestorOrigins": {
                        "0": "http://localhost:8080"
                    },
                    "href": "http://localhost:8080/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "origin": "http://localhost:8080",
                    "protocol": "http:",
                    "host": "localhost:8080",
                    "hostname": "localhost",
                    "port": "8080",
                    "pathname": "/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "search": "",
                    "hash": ""
                },
                "jQuery112406764785200841776": 1
            },
            "selector": "#uploadBtn0"
        },
        "url": "/sdss_war_exploded/files/uploadFile",
        "field": "file",
        "acceptMime": "",
        "method": "post",
        "data": {},
        "drag": true,
        "size": 0,
        "number": 4,
        "multiple": true,
        "elem": {
            "0": {
                "jQuery112406764785200841776": 25
            },
            "length": 1,
            "context": {
                "location": {
                    "ancestorOrigins": {
                        "0": "http://localhost:8080"
                    },
                    "href": "http://localhost:8080/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "origin": "http://localhost:8080",
                    "protocol": "http:",
                    "host": "localhost:8080",
                    "hostname": "localhost",
                    "port": "8080",
                    "pathname": "/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "search": "",
                    "hash": ""
                },
                "jQuery112406764785200841776": 1
            },
            "selector": "#cbtn0"
        },
        "elemList": {
            "0": {},
            "length": 1,
            "context": {
                "location": {
                    "ancestorOrigins": {
                        "0": "http://localhost:8080"
                    },
                    "href": "http://localhost:8080/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "origin": "http://localhost:8080",
                    "protocol": "http:",
                    "host": "localhost:8080",
                    "hostname": "localhost",
                    "port": "8080",
                    "pathname": "/sdss_war_exploded/lxActivity/toLxActivityEnroll",
                    "search": "",
                    "hash": ""
                },
                "jQuery112406764785200841776": 1
            },
            "selector": "#tbodyfiles0"
        },
        "item": {
            "0": {
                "jQuery112406764785200841776": 25
            },
            "context": {
                "jQuery112406764785200841776": 25
            },
            "length": 1
        },
        "files": {
            "1656035424986-0": {},
            "1656036145067-0": {}
        }
    }
}

標籤：jQuery

上一篇：JQuery 遍歷的方法

下一篇：jQuery筆記