为什么我不能用angular-cli上传我的本地图片？

Angular CLI是一个用于开发Angular应用程序的命令行界面工具。它提供了一些方便的命令和功能，用于创建、构建和测试Angular项目。

在Angular CLI中，上传本地图片通常不是直接支持的功能。这是因为Angular CLI主要关注于项目的构建和开发流程，而不是文件上传和处理。

要在Angular应用程序中实现上传本地图片的功能，您可以使用其他库或框架来处理文件上传，例如Angular Material或ng2-file-upload。这些库提供了丰富的API和组件，可以帮助您实现文件上传的功能。

在使用这些库时，您需要编写一些代码来处理文件选择、上传和服务器端的处理。通常，您需要使用后端技术（如Node.js、Java、Python等）来接收上传的文件，并将其保存到服务器上的适当位置。

以下是一个示例代码片段，展示了如何使用Angular Material来实现上传本地图片的功能：

首先，安装Angular Material库：

npm install @angular/material

在您的Angular模块中导入所需的模块：

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule,
    MatIconModule,
    MatProgressBarModule
  ],
  ...
})
export class YourModule { }

在您的组件模板中添加文件上传的HTML代码：

<input type="file" (change)="onFileSelected($event)">
<button mat-raised-button color="primary" (click)="uploadFile()">Upload</button>
<mat-progress-bar mode="determinate" [value]="uploadProgress"></mat-progress-bar>

在您的组件类中添加相应的处理逻辑：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourComponent {
  uploadProgress: number = 0;

  constructor(private http: HttpClient) { }

  onFileSelected(event: any) {
    // 获取选择的文件
    const file: File = event.target.files[0];
    // 执行上传操作
    this.uploadFile(file);
  }

  uploadFile(file: File) {
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);

    this.http.post('your-upload-url', formData, {
      reportProgress: true,
      observe: 'events'
    }).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.uploadProgress = Math.round((100 * event.loaded) / event.total);
      } else if (event.type === HttpEventType.Response) {
        // 上传完成后的处理逻辑
      }
    });
  }
}

请注意，上述代码仅为示例，您需要根据您的具体需求进行适当的修改和调整。

推荐的腾讯云相关产品和产品介绍链接地址：