JavaScript如何将数组数据赋值给多文件上传file类型input元素

• 浏览器出于安全限制，<input type="file">的value属性是只读的，不支持通过JavaScript直接赋值普通值，仅能由用户手动选文件触发写入，或通过官方指定的DataTransfer API操作文件列表
• 你代码里的oldArray是仅包含id、name字段的普通JS对象，不是浏览器原生File类型的实例，本身不包含文件二进制内容，就算绕过限制赋值，也无法被识别为可上传的文件。

根据你的实际场景二选一即可：

场景1：仅需要提交已有文件的元信息 #

如果你这些旧文件已经上传过服务端，这次提交只需要传文件ID关联数据，完全不需要强行修改file input，加一个普通隐藏字段存数据即可：

<input type="hidden" name="exist_article_media" id="id_exist_article_media">
<script>
  let oldArray = [
    {"id": 1,"name": "vue-file-agent.umd.js"},
    {"id": 2,"name": "dribbble.webp"},
    {"id": 3,"name": "Screenshot from 2022-06-23 08-25-07.png"}
  ]
  document.querySelector('#id_exist_article_media').value = JSON.stringify(oldArray);
</script>

提交表单时后端从exist_article_media字段解析旧文件关联关系，从article_media字段取用户新选的文件即可。

场景2：需要把真实File对象挂载到多文件input #

如果你手里的数组是真实的File对象实例（包含文件二进制内容、不是只有id/name的元数据），可以通过DataTransfer API构造文件列表赋值给input的files属性，注意不是赋值value：

const articleMedia = document.querySelector('#id_article_media');
// 初始化文件传输容器
const dt = new DataTransfer();
// 替换成你的真实File对象数组
const realFileArray = [/* File实例，比如用户之前选过的文件、本地读取到的文件 */];
realFileArray.forEach(file => dt.items.add(file));
// 给input的files属性赋值即可
articleMedia.files = dt.files;

提示：你当前代码里的oldArray属于场景1的元数据，没有文件实体，无法用第二种方案挂载到file input上，不要白费功夫尝试给这类纯数据构造假File对象，没有实际文件内容传了也是无效数据。

内容的提问来源于stack exchange，提问作者afi