我对有关 NodeLists 的一些预期行为有点困惑,并希望有人能指出我正确的方向。
所以我有一个隐藏的输入元素,它的value
属性包含一个带有一堆 s3 上传数据的 json 字符串。它看起来像这样:
<input
name="uppyResult"
type="hidden"
value="[
{
"successful":[
{
"source":"Dashboard",
"id":"uppy-screen/shot/2021/07/15/at/4/00/02/pm/png-10-10-1d-1d-10-10-1e-1e-10-1e-image/png-165186-1626390007842",
"name":"Screen Shot 2021-07-15 at 4.00.02 PM.png",
"extension":"png",
"meta":{
"relativePath":null,
"name":"Screen Shot 2021-07-15 at 4.00.02 PM.png",
"type":"image/png",
"key":"cache/4870f1e1d9f075c7397b3422f101f7e4.png",
"Content-Disposition":"inline; filename=\"Screen Shot 2021-07-15 at 4.00.02 PM.png\"; filename*=UTF-8''Screen%20Shot%202021-07-15%20at%204.00.02%20PM.png",
"Content-Type":"image/png",
"policy":"eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMDo0M1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvNDg3MGYxZTFkOWYwNzVjNzM5N2IzNDIyZjEwMWY3ZTQucG5nIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cIlNjcmVlbiBTaG90IDIwMjEtMDctMTUgYXQgNC4wMC4wMiBQTS5wbmdcIjsgZmlsZW5hbWUqPVVURi04JydTY3JlZW4lMjBTaG90JTIwMjAyMS0wNy0xNSUyMGF0JTIwNC4wMC4wMiUyMFBNLnBuZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvcG5nIn0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MF0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQTNKRVpaRkFOTzNCNlI0VE8vMjAyMTA4MjcvdXMtd2VzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotZGF0ZSI6IjIwMjEwODI3VDIyMjA0M1oifV19",
"x-amz-credential":"whatever/20210827/region/s3/aws4_request",
"x-amz-algorithm":"AWS4-HMAC-SHA256",
"x-amz-date":"20210827T222043Z",
"x-amz-signature":"8478e24c985b7517399dd3278591e283584403c666983b1d6900c3d4c0b594d5"
},
"type":"image/png",
"data":{},
"progress":{
"uploadStarted":1630102841653,
"uploadComplete":true,
"percentage":100,
"bytesUploaded":167201,
"bytesTotal":167201,
"postprocess":null
},
"size":165186,
"isRemote":false,
"remote":"",
"preview":"blob:https://example.com/ab73e53f-7b2c-4a77-aade-07f216b31d27",
"xhrUpload":{
"method":"post",
"formData":true,
"endpoint":"https://example.s3.region.amazonaws.com",
"metaFields":[
"key","Content-Disposition","Content-Type","policy","x-amz-credential","x-amz-algorithm","x-amz-date","x-amz-signature"
],
"headers":{}
},
"response":{
"status":204,
"body":{
"location":null
},
"uploadURL":null
},
"uploadURL":null,"isPaused":false
}
],
"failed":[],
"uploadID":"cksux56ic00013h63szerkigt"
},
{
"successful":[
{
"source":"Dashboard",
"id":"uppy-blackdog/parkerbright/servitude2017/jpg-2v-2v-1e-image/jpeg-24872-1613012190277",
"name":"blackdog_parkerbright_servitude2017.jpg",
"extension":"jpg",
"meta":{
"relativePath":null,
"name":"blackdog_parkerbright_servitude2017.jpg",
"type":"image/jpeg",
"key":"cache/da42d10f2b1f47b004654b257df07a01.jpg",
"Content-Disposition":"inline; filename=\"blackdog_parkerbright_servitude2017.jpg\"; filename*=UTF-8''blackdog_parkerbright_servitude2017.jpg",
"Content-Type":"image/jpeg",
"policy":"eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMTozMVoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvZGE0MmQxMGYyYjFmNDdiMDA0NjU0YjI1N2RmMDdhMDEuanBnIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cImJsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ2JsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjBdLHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUEzSkVaWkZBTk8zQjZSNFRPLzIwMjEwODI3L3VzLXdlc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDgyN1QyMjIxMzFaIn1dfQ==",
"x-amz-credential":"whatever/20210827/region/s3/aws4_request",
"x-amz-algorithm":"AWS4-HMAC-SHA256",
"x-amz-date":"20210827T222131Z",
"x-amz-signature":"a17970d6b111ed0acb535342433626ec7d277fd6364517bb3ee9c02de529f0d7"
},
"type":"image/jpeg",
"data":{},
"progress":{
"uploadStarted":1630102891533,
"uploadComplete":true,
"percentage":100,
"bytesUploaded":26864,
"bytesTotal":26864,
"postprocess":null
},
"size":24872,
"isRemote":false,
"remote":"",
"preview":"blob:https://example.com/79066114-d51b-4ef4-b62a-af8ac80ae617",
"xhrUpload":{
"method":"post",
"formData":true,
"endpoint":"https://example.s3.region.amazonaws.com",
"metaFields":[
"key","Content-Disposition","Content-Type","policy","x-amz-credential","x-amz-algorithm","x-amz-date","x-amz-signature"
],
"headers":{}
},
"response":{
"status":204,
"body":{
"location":null
},
"uploadURL":null
},
"uploadURL":null,
"isPaused":false
}
],
"failed":[],
"uploadID":"cksux68zv00033h63tzjc85kg"
}
]"
>
当我登录document.getElementsByName("uppyResult")
到控制台时,它显示为 NodeList。这显然有点像数组,但不是?我需要在此 NodeList 中访问的数据需要单击并滚动才能到达 - 我只需展开input
并滚动到defaultValue
.
我需要的是访问successful
此 NodeList 中的每个对象。可以有一个或多个。请注意,这个有两个。
我最后一次尝试做同样的事情失败了,因为我误解了我想要做的事情。尽管所选答案确实解决了我所说的问题,但我需要的是对初始[0]
项目执行相同的操作。每一批上传的文件都占用这个数组的一个索引,我需要把它们全部获取。
该答案的旧代码是:
if (reason === 'removed-by-user') {
const preParsedData = document.getElementsByName("uppyResult")[0].value //this is the problem, i think - i need *all* the elements in the array/NodeList
const parsedData = JSON.parse(preParsedData)
const toRemove = file.id
parsedData.forEach(item => {
Object.values(item).forEach(array => {
if (!Array.isArray(array))
return;
const index = array.findIndex(elm => elm.id === toRemove)
if (index > -1)
array.splice(index, 1)
});
if (item.successful.length === 0)
delete item.successful
delete item.failed
delete item.uploadID
});
console.log(parsedData)
document.getElementsByName("uppyResult")[0].value = JSON.stringify(parsedData)
}
})