如何在Blazor中不使用第三方组件实现拖拽及剪贴板粘贴文件上传

原有代码问题修复 #

1. InputFile无公开Element属性问题：Blazor内置InputFile组件的Element属性为非公开成员，无法直接访问。可通过@ref:{属性名}语法直接获取InputFile渲染出的原生DOM元素引用，无需访问组件内部属性。
2. export语法无法识别问题：该问题多由低版本Blazor不支持ES模块导入，或JS文件路径配置错误导致。可选择将JS逻辑改为全局函数注册，直接在入口页引入即可，无需使用模块导入语法。同时原有JS代码存在事件销毁时变量名拼写错误的问题，已同步修复。

完整可运行代码 #

1. DropZone.razor 组件代码 #

@* file: DropZone.razor *@
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<h1>上传文件</h1>

<div @ref="dropZoneElement" class="drop-zone">
    <p>拖拽文件到此处、粘贴剪贴板图片，或点击下方选择框上传</p>
    <InputFile OnChange="@OnChange" @ref:inputFileElement="inputFileElement" />
</div>

@* 上传后图片预览 *@
@if (!string.IsNullOrEmpty(src))
{
    <img src="@src" alt="上传预览图" />
}

@code {
    private ElementReference dropZoneElement;
    private ElementReference inputFileElement;

    private IJSObjectReference? _module;
    private IJSObjectReference? _dropZoneInstance;

    private string? src;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 加载JS模块，若使用全局函数版本可替换为直接调用全局方法
            _module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./dropZone.js");
            _dropZoneInstance = await _module.InvokeAsync<IJSObjectReference>("initializeFileDropZone", 
                dropZoneElement, inputFileElement);
        }
    }

    private async Task OnChange(InputFileChangeEventArgs e)
    {
        // 限制单文件最大10MB，可根据需求调整
        using var stream = e.File.OpenReadStream(1024 * 1024 * 10);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        src = $"data:{e.File.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";
    }

    public async ValueTask DisposeAsync()
    {
        if (_dropZoneInstance != null)
        {
            await _dropZoneInstance.InvokeVoidAsync("dispose");
            await _dropZoneInstance.DisposeAsync();
        }

        if (_module != null)
        {
            await _module.DisposeAsync();
        }
    }
}

2. wwwroot/dropZone.js 脚本代码（ES模块版本） #

// file: wwwroot/dropZone.js
export function initializeFileDropZone(dropZoneElement, inputFile) {
    // 拖拽悬停样式
    function onDragHover(e) {
        e.preventDefault();
        dropZoneElement.classList.add("hover");
    }

    function onDragLeave(e) {
        e.preventDefault();
        dropZoneElement.classList.remove("hover");
    }

    // 处理文件拖拽
    function onDrop(e) {
        e.preventDefault();
        dropZoneElement.classList.remove("hover");
        inputFile.files = e.dataTransfer.files;
        inputFile.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // 处理剪贴板粘贴
    function onPaste(e) {
        inputFile.files = e.clipboardData.files;
        inputFile.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // 注册事件
    dropZoneElement.addEventListener("dragenter", onDragHover);
    dropZoneElement.addEventListener("dragover", onDragHover);
    dropZoneElement.addEventListener("dragleave", onDragLeave);
    dropZoneElement.addEventListener("drop", onDrop);
    dropZoneElement.addEventListener('paste', onPaste);

    // 返回销毁方法
    return {
        dispose: () => {
            dropZoneElement.removeEventListener('dragenter', onDragHover);
            dropZoneElement.removeEventListener('dragover', onDragHover);
            dropZoneElement.removeEventListener('dragleave', onDragLeave);
            dropZoneElement.removeEventListener("drop", onDrop);
            dropZoneElement.removeEventListener('paste', onPaste);
        }
    }
}

3. 可选：全局JS版本（无需模块导入） #

如果ES模块无法正常使用，可改用此版本，在index.html/_Layout.cshtml中直接引入该JS文件即可：

// file: wwwroot/dropZone-global.js
window.initializeFileDropZone = function(dropZoneElement, inputFile) {
    // 逻辑和模块版本完全一致，只是改为挂载到window对象
    function onDragHover(e) {
        e.preventDefault();
        dropZoneElement.classList.add("hover");
    }

    function onDragLeave(e) {
        e.preventDefault();
        dropZoneElement.classList.remove("hover");
    }

    function onDrop(e) {
        e.preventDefault();
        dropZoneElement.classList.remove("hover");
        inputFile.files = e.dataTransfer.files;
        inputFile.dispatchEvent(new Event('change', { bubbles: true }));
    }

    function onPaste(e) {
        inputFile.files = e.clipboardData.files;
        inputFile.dispatchEvent(new Event('change', { bubbles: true }));
    }

    dropZoneElement.addEventListener("dragenter", onDragHover);
    dropZoneElement.addEventListener("dragover", onDragHover);
    dropZoneElement.addEventListener("dragleave", onDragLeave);
    dropZoneElement.addEventListener("drop", onDrop);
    dropZoneElement.addEventListener('paste', onPaste);

    return {
        dispose: () => {
            dropZoneElement.removeEventListener('dragenter', onDragHover);
            dropZoneElement.removeEventListener('dragover', onDragHover);
            dropZoneElement.removeEventListener('dragleave', onDragLeave);
            dropZoneElement.removeEventListener("drop", onDrop);
            dropZoneElement.removeEventListener('paste', onPaste);
        }
    }
}

使用全局版本时，C#的OnAfterRenderAsync方法对应修改为：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _dropZoneInstance = await JSRuntime.InvokeAsync<IJSObjectReference>("initializeFileDropZone", 
            dropZoneElement, inputFileElement);
    }
}

4. 配套样式 #

添加到全局CSS或组件的scoped样式中：

.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
}
.drop-zone.hover {
    border-color: #007bff;
    background-color: #f0f8ff;
}
img {
    max-width: 100%;
    max-height: 400px;
    margin-top: 1rem;
}

功能说明 #

该实现无需依赖任何第三方组件，支持三种上传方式：

• 点击InputFile选择文件
• 拖拽文件到拖拽区域上传
• 聚焦拖拽区域后，粘贴剪贴板内的图片上传
  上传成功后自动展示图片预览，可根据需求修改文件大小限制、文件类型过滤规则。

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