跳到主要内容

1 篇博文 含有标签「DataTransferList」

查看所有标签

· 阅读需 1 分钟
GSemir

问题​

多文件上传前，支持移除某个文件

但问题在于 FileList 伪数组是只读的，我们可以通过索引 fileList[index] 读取其中的 File 对象，但无法增加或删除文件列表的数据

解决方案​

可以借助 Array.from 结合 DataTransferList 来处理 FileList 数据

首先将 FileList 转为数组，方便增加或删除的操作

const fileArr = Array.from(fileList)

fileArr.push(newFile)

fileArr.splice(deleteIndex, 1)

然后使用 DataTransferList 将处理后的 File 数组恢复为 FileList

const dataTransfer = new DataTransfer()

// 使用 dataTransfer.items.add 方法将数组中的 File 添加到 dataTransfer
fileArray.forEach((file) => {
  dataTransfer.items.add(file)
})

// 此时 dataTransfer.files 属性就是 FileList 类型
field.onChange(dataTransfer.files)