Angular如何实现附件上传？点击上传按钮页面自动刷新怎么解决

触发原因 #

HTML 规范中，未显式指定 type 属性的 <button> 标签如果位于 <form> 表单节点内部，默认类型为 submit，点击后会触发表单默认提交行为，直接导致页面重载。

修复方案 #

仅需要在模板的按钮标签中新增type="button"显式指定按钮类型，即可阻止默认提交行为，解决刷新问题：

修改后的 File upload.html 代码 #

<input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">
    {{fileName || "No file uploaded yet."}}
    <!-- 新增type="button"属性 -->
    <button type="button" mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

可选优化建议 #

当前TS代码中的上传请求未添加回调处理，建议补充状态逻辑避免上传无响应感知：

优化后的 onFileSelected 方法 #

onFileSelected(event) {
    const file:File = event.target.files[0];
    if (file) {
        this.fileName = file.name;
        const formData = new FormData();
        formData.append("thumbnail", file);
        this.http.post("/api/thumbnail-upload", formData)
        .subscribe({
            next: (res) => {
                // 可添加上传成功提示、后续业务逻辑
                console.log('上传成功', res);
            },
            error: (err) => {
                // 可添加上传失败提示、错误兜底逻辑
                console.error('上传失败', err);
            }
        });
    }
}

如果按钮外层表单本身不需要提交功能，也可直接给<form>标签添加(submit)="$event.preventDefault()"彻底规避误触提交的风险。

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