如何在Angular中使用Ionic实现PDF文件上传与查看功能

核心问题原因 #

• 异步逻辑处理错误：fetch 是异步API，当前代码发起请求后立刻执行alert和页面刷新，不等请求返回结果，大概率请求还没完成页面就已经重载，自然看不到提示，甚至上传本身也会被中断。
• 语法不符合Angular开发规范：当前使用原生onclick绑定全局函数、document.getElementById获取DOM的写法在Angular框架下不生效，全局定义的uploadPDF函数Angular无法识别，点击按钮本来就触发不了对应的上传逻辑。
• 缺少错误捕获逻辑：没有对请求异常的处理，哪怕请求发送失败也没有对应提示，无法定位具体问题。

修正后代码 #

组件模板（xxx.component.html） #

<input type="file" name="file" id="file" accept=".pdf" #fileInput>
<ion-button (click)="uploadPDF()" name="submit">
  Upload File
</ion-button>

组件逻辑（xxx.component.ts） #

首先确认你已经在当前模块导入了HttpClientModule，再编写组件逻辑：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AlertController } from '@ionic/angular'; // 推荐用Ionic自带的提示组件替代原生alert

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;

  constructor(
    private http: HttpClient,
    private alertController: AlertController
  ) {}

  async uploadPDF() {
    const file = this.fileInput.nativeElement.files?.[0];
    if (!file) {
      const alert = await this.alertController.create({
        header: '提示',
        message: '请先选择PDF文件',
        buttons: ['确定']
      });
      await alert.present();
      return;
    }

    try {
      // 此处替换为你实际的后端上传接口地址
      await this.http.put(`/uploads/${encodeURIComponent(file.name)}`, file).toPromise();
      const successAlert = await this.alertController.create({
        header: '提示',
        message: 'your file has been uploaded',
        buttons: ['确定']
      });
      await successAlert.present();
      location.reload();
    } catch (error) {
      const errorAlert = await this.alertController.create({
        header: '上传失败',
        message: '文件上传出错，请稍后重试',
        buttons: ['确定']
      });
      await errorAlert.present();
      console.error('上传错误：', error);
    }
  }
}

额外注意事项 #

• 如果后端上传接口要求特定的请求头、参数格式，需要在put请求的第三个参数里添加对应的配置
• 不推荐上传完成后直接重载整个页面，可以手动清空文件选择框的内容来实现重置效果，使用体验更好

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