iOS设备中Blazor WASM文件上传组件相机照片无法同步至输入框

1. 直接使用原生InputFile并指定相机源 #

放弃依赖隐藏InputFile的间接触发逻辑，给InputFile添加accept="image/*"和capture="camera"属性，让iOS直接唤起相机，避免JS层文件传递环节的丢失：

<InputFile id="camera-input" accept="image/*" capture="camera" OnChange="HandleFileSelected" style="display:none;" />
<button @onclick="() => document.getElementById('camera-input').click()">拍照上传</button>

@code {
    private async Task HandleFileSelected(InputFileChangeEventArgs e)
    {
        var file = e.File;
        // 执行后续上传逻辑
    }
}

iOS Safari对capture属性支持直接唤起相机，无需额外JS处理，减少中间环节的兼容性风险。

2. 修正JavaScript文件同步逻辑 #

若需保留自定义上传区域（拖拽、粘贴等功能），调整JS代码确保iOS拍摄的文件能被InputFile正确接收：

function setFileToInput(inputElement, file) {
    // 用DataTransfer构造标准FileList，iOS不兼容自定义文件列表对象
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    inputElement.files = dataTransfer.files;
    
    // 触发标准change事件
    const event = new Event('change', { bubbles: true });
    inputElement.dispatchEvent(event);
}

iOS Safari对非标准FileList对象支持性差，必须通过DataTransfer构造合法文件列表后再触发事件。

3. 替换Blazorise组件为原生HTML输入框 #

Blazorise的InputFile封装可能对iOS文件事件处理有遗漏，改用原生<input type="file">配合Blazor绑定：

<input type="file" id="native-input" accept="image/*" capture="camera" @onchange="HandleNativeFileSelected" style="display:none;" />
<div @onclick="() => document.getElementById('native-input').click()" class="upload-area">
    点击拍照或拖拽文件到这里
</div>

@code {
    private async Task HandleNativeFileSelected(ChangeEventArgs e)
    {
        var inputFile = e.Target as IJSObjectReference;
        var files = await inputFile.InvokeAsync<IReadOnlyList<IBrowserFile>>("files");
        if (files.Any())
        {
            var file = files.First();
            // 处理文件上传
        }
    }
}

原生输入框的事件处理在iOS上更稳定，避免组件封装带来的兼容性问题。

4. 等待文件加载完成后触发事件 #

iOS Safari相机拍照后，文件对象加载存在延迟，需等待文件就绪后再同步到InputFile：

function handleCameraFile(file) {
    if (file.type.startsWith('image/')) {
        const img = new Image();
        img.onload = function() {
            setFileToInput(document.getElementById('hidden-input'), file);
            URL.revokeObjectURL(img.src);
        };
        img.src = URL.createObjectURL(file);
    } else {
        setFileToInput(document.getElementById('hidden-input'), file);
    }
}

确保文件完全加载后再传递给InputFile，避免因文件未就绪导致事件不触发。

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