如何将Angular项目assets文件夹中的图片发送至后端？

你当前代码的问题在于：直接用文件路径字符串创建File对象是无效的，File构造函数的第一个参数需要的是文件的二进制内容，而非路径。下面是正确的实现步骤：

1. 通过HttpClient获取Assets图片的Blob内容 #

先从assets目录请求图片资源，得到Blob格式的文件内容：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

private getAssetImageAsFile(): Promise<File> {
  return this.http.get('assets/layout/images/register_user.png', { responseType: 'blob' })
    .toPromise()
    .then(blob => {
      // 将Blob转换为File对象
      return new File([blob], 'register_user.png', { type: blob.type });
    });
}

2. 在提交方法中调用并发送 #

修改你的submitRegistration方法，先获取File对象再发送：

private async submitRegistration() {
  try {
    const fileToUpload = await this.getAssetImageAsFile();
    this.registerUser.registerUser(fileToUpload, this.registerForm.value).subscribe(
      () => {
        // 处理成功逻辑
      },
      (error) => {
        // 处理错误逻辑
        console.error('上传失败', error);
      }
    );
  } catch (error) {
    console.error('获取图片失败', error);
  }
}

补充说明 #

• 确保你的Angular项目中HttpClientModule已经在AppModule或对应功能模块中导入
• 如果后端需要特定的请求格式（比如FormData），可以把File对象包装到FormData里再发送：

const formData = new FormData();
formData.append('image', fileToUpload);
formData.append('userData', JSON.stringify(this.registerForm.value));
// 然后发送formData
this.registerUser.registerUser(formData).subscribe(...);

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