Safari中File对象自定义uuid4属性莫名消失问题求助

问题概述 #

通过Object.assign或Object.defineProperty方法为File对象设置uuid4属性后，该属性在Chrome中正常保留，但在Safari浏览器中会无规律地莫名消失。

复现步骤 #

• 本地运行示例代码，点击页面中的「选择文件」按钮并选择本地文件
• preview-uploads.js脚本会为选中的File对象添加uuid4属性
• uploads-manager.js脚本尝试读取该属性并通过console.log(file.uuid4)打印到控制台

注意事项 #

• 示例使用本地文件资源，需关闭Safari的本地文件限制才能正常运行

问题表现 #

• 最小复现示例中问题触发无规律，需尝试20-30次才会出现，此时控制台打印file.uuid4为undefined
• 实际业务场景中问题出现概率高达90%，经测试与文件类型、大小均无明显关联
• 业务场景中必须通过Ajax构建HTML，因此该逻辑已纳入复现示例

相关代码 #

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
</head>
<body>
</body>
<script>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'file:///path/to/test_ajax.html',
            success: function (response) {
                $('body').html(response);
            }
        })
    });
</script>
</html>

test_ajax.html

<script src="/path/to/preview-uploads.js"></script>
<div>
    <div id="files-test1">
        <input autocomplete="off" multiple="true" name="files[]"
               onchange="previewFiles('test1');uploadFiles()" type="file">
    </div>
    <div class="grid-test1 padding-top-15" data-uuid4list="">
        <a href="" target="_blank"><img/>
        </a>
    </div>
</div>
<div>
    <div id="files-test2">
        <input autocomplete="off" multiple="true" name="files[]"
               onchange="previewFiles('test2');uploadFiles()" type="file">
    </div>
    <div class="grid-test2 padding-top-15" data-uuid4list="">
        <a href="" target="_blank">
            <img/>
        </a>
    </div>
</div>
<script src="/path/to/upload-manager.js"></script>

preview-uploads.js

function previewFiles(fileId) {
  var files   = document.querySelector('[id="files-' + fileId.replace('.','\\.') + '"]>input').files;

  if (files) {
    [].forEach.call(files, function(file) {
      let uuid4 = '09832a0d-86c4-4a9f-ab93-23bac596b83b';
      Object.assign(file, {'uuid4': uuid4});
    });
  };
};

upload-manager.js

function uploadFiles() {
    var formData = new FormData();
    $("input[type='file']").each(function() {
        $.each(this.files, function(i, file) {
            formData.append('files[]', file, file.uuid4 + ':' + file.name);
            console.log('file.uuid4 will follow next');
            console.log(file.uuid4);
        });
    });
};

问题截图 #

恳请各位帮忙分析该属性莫名消失的原因。

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