angular2 multipart/form-data 上传图片

在 Angular2 中，可以使用 `FormData` 对象来上传 `multipart/form-data` 格式的文件，包括图片。以下是一个示例代码：

1. 首先，创建一个 `input` 元素，用于选择文件：

<input type="file" (change)="onFileSelected($event)">

2. 在组件中，定义一个 `FormData` 对象和一个处理文件选择的方法：

formData: FormData = new FormData();

onFileSelected(event) {
  const file: File = event.target.files[0];
  this.formData.append('file', file, file.name);
}

3. 在发送请求时，将 `FormData` 对象作为参数：

uploadFile() {
  this.http.post('http://example.com/upload', this.formData)
    .subscribe(res => {
      console.log(res);
    });
}

注意，需要导入 `HttpClientModule` 并注入 `HttpClient` 服务。同时，服务器端也需要对上传的文件进行处理。

相关问题

@angular-devkit/build-angular:browser 如何配置自定义webpack

要为 Angular 项目配置自定义的 webpack，可以使用 `@angular-builders/custom-webpack` 包。以下是配置步骤：

1. 安装 `@angular-builders/custom-webpack` 包：`npm install --save-dev @angular-builders/custom-webpack`

2. 在 `angular.json` 文件中找到 `architect.build.builder` 属性，将其值从 `@angular-devkit/build-angular:browser` 改为 `@angular-builders/custom-webpack:browser`。

3. 在 `angular.json` 文件中添加一个名为 `customWebpackConfig` 的属性，该属性应该是一个指向 webpack 配置文件的路径的字符串。

   "customWebpackConfig": {
     "path": "./extra-webpack.config.js"
   }

4. 创建 `extra-webpack.config.js` 文件，并在其中编写自定义的 webpack 配置。例如，以下是一个简单的示例，它添加了一个自定义的 loader：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.custom\.js$/,
           use: [
             'babel-loader',
             {
               loader: 'custom-loader',
               options: {
                 foo: 'bar'
               }
             }
           ]
         }
       ]
     }
   };

5. 运行 `ng build` 命令即可使用自定义的 webpack 配置进行构建。

请注意，如果您使用的是 Angular 9 或更高版本，还需要将 `@angular-builders/custom-webpack` 包的版本更新为 `^9.0.0`。

<form nz-form [nzLayout]="'inline'" class="search-form"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>&nbsp;&nbsp;案件名称</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" value="" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <nz-form-item> <nz-form-label>案件编号</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" value="" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'" (click)="getDetail(true)">查询</button> <button nz-button type="reset" class="mx-sm">重置</button> </nz-col> </nz-row> </form>

在使用 TypeScript 编写上述表单时，你可以这样写：

import { Component } from '@angular/core';

@Component({
  selector: 'app-search-form',
  templateUrl: './search-form.component.html',
  styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent {
  q = {
    ajmc: '',
    ajbh: '',
  };

  onSubmit() {
    // 处理表单提交事件
  }

  onReset() {
    this.q.ajmc = '';
    this.q.ajbh = '';
  }
}

在这个例子中，我们使用了 Angular 框架来构建组件。在组件类中，我们定义了一个 `q` 对象来存储表单中的数据。当提交表单时，我们可以在 `onSubmit` 方法中处理表单提交事件，当重置表单时，我们可以在 `onReset` 方法中将 `q` 对象中的属性值设置为空字符串，从而实现表单重置的功能。

在 HTML 文件中，你可以这样写：

<form nz-form [nzLayout]="'inline'" class="search-form" (ngSubmit)="onSubmit()">
  <nz-row>
    <nz-col>
      <nz-form-item>
        <nz-form-label>&nbsp;&nbsp;案件名称</nz-form-label>
        <nz-form-control>
          <nz-input-group>
            <input nz-input width="200px" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称">
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </nz-col>
    <nz-col>
      <nz-form-item>
        <nz-form-label>案件编号</nz-form-label>
        <nz-form-control>
          <nz-input-group>
            <input nz-input width="200px" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号">
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </nz-col>
    <nz-col>
      <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'">查询</button>
      <button nz-button type="button" class="mx-sm" (click)="onReset()">重置</button>
    </nz-col>
  </nz-row>
</form>

在这个例子中，我们使用 `(ngSubmit)` 指令来监听表单的提交事件，并在事件发生时调用组件类中的 `onSubmit` 方法。在重置按钮中，我们使用 `(click)` 指令来监听按钮的点击事件，并在事件发生时调用组件类中的 `onReset` 方法。注意，重置按钮的类型应该为 `type="button"`，这样可以避免表单的提交事件被触发。