好的，下面是一个简单的示例：
1. 安装依赖
```
npm install --save @
angular/material @
angular/cdk @
angular/flex-layout
```
2. 导入模块和组件
在 `app.module.ts` 中导入以下模块和组件：
```typescript
import { NgModule } from '@
angular/core';
import { BrowserModule } from '@
angular/platform-browser';
import { BrowserAnimationsModule } from '@
angular/platform-browser/animations';
import { FormsModule } from '@
angular/forms';
import { HttpClientModule } from '@
angular/common/http';
import { MatInputModule } from '@
angular/material/input';
import { MatButtonModule } from '@
angular/material/button';
import { MatIconModule } from '@
angular/material/icon';
import { MatCardModule } from '@
angular/material/card';
import { FlexLayoutModule } from '@
angular/flex-layout';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCardModule,
FlexLayoutModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```
3. 编写组件模板和样式
在 `app.component.html` 中编写组件模板：
```html
<div fxLayout="column" fxLayoutAlign="center center">
<mat-card>
<mat-card-header>
<mat-card-title>上传文件</mat-card-title>
</mat-card-header>
<mat-card-content>
<input type="file" (change)="onFileSelected($event)" />
<mat-card *ngIf="previewUrl">
<mat-card-header>
<mat-card-title>预览</mat-card-title>
</mat-card-header>
<img [src]="previewUrl" />
</mat-card>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="uploadFile()">上传</button>
</mat-card-actions>
</mat-card>
</div>
```
在 `app.component.css` 中编写组件样式：
```css
mat-card {
margin-top: 20px;
max-width: 500px;
}
img {
max-width: 100%;
max-height: 300px;
}
```
4. 编写组件代码
在 `app.component.ts` 中编写组件代码：
```typescript
import { Component } from '@
angular/core';
import { HttpClient } from '@
angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
file: File | null = null;
previewUrl: string | null = null;
constructor(private httpClient: HttpClient) {}
onFileSelected(event: any) {
this.file = event.target.files[0];
this.preview();
}
preview() {
if (!this.file) {
this.previewUrl = null;
return;
}
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.previewUrl = reader.result as string;
};
}
uploadFile() {
if (!this.file) {
return;
}
const formData = new FormData();
formData.append('file', this.file);
this.httpClient.post('http://example.com/upload', formData).subscribe(
response => {
console.log(response);
},
error => {
console.error(error);
}
);
}
}
```
这个组件包括三个方法：
- `onFileSelected`：当用户选择文件时触发，将文件存储到 `file` 变量中，并调用 `preview` 方法预览文件。
- `preview`：使用 `FileReader` 对象读取 `file` 变量中的文件，并将预览结果存储到 `previewUrl` 变量中。
- `uploadFile`：将 `file` 变量中的文件上传到服务器。
需要注意的是，这个示例代码中上传的 URL 地址是假的，需要根据实际情况修改。同时，也需要在后端代码中对文件上传进行处理。
648
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
