Angular 2 上传图片按钮刷新页面

Question

我有一个带有两个按钮的 html 表单：-

[1] 一个按钮用于上传图像文件（.jpg）[2]，第二个按钮用于提交表单。

问题是上传图像的方法完成后，上传图像按钮似乎正在刷新页面。 以下是我的 html：-

<div class="m-b-18px">
  <div class="col-m-12">
    <a (click)="readRecipes()" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-plus"></span>Read Recipes
    </a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
      <table class="table table-hover table-responsive table-bordered">
        <tr>
          <td>
            Name
          </td>
          <td>
            <input name="name" formControlName="name" type="text" class="form-control" required />
            <div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
              class="alert alert-danger">Name is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Description
          </td>
          <td>
            <textarea name="description" formControlName="description" class="form-control" required>

            </textarea>
            <div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
              class="alert alert-danger">
              Description is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Image
          </td>
          <td>
            <input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
            <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
            <input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
          </td>
        </tr>



        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
                <span class="glyphicon glyphicon-plus"></span> Create
            </button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

我的 uploadImage 方法代码如下：-

 uploadImage(e) {
    let files = this.elem.nativeElement.querySelector('#selectFile').files;
    let formData = new FormData();
    let file = files[0];

    formData.append('selectFile', file, file.name);

    this._imageService.uploadImage(formData)
      .subscribe(
        image => {
          console.log(image);
          this.addImageIdToHtml(image)
          e.preventDefault();
          e.stopPropagation();
        },
        error => console.log(error)
      );
  }

一旦上述方法运行完毕，页面就会刷新，导致我的应用程序返回到登陆页面。 这不是我想要的行为。 我真正想要的是在按下提交表单按钮之前保留表单页面。 有人可以帮我吗？

Answer 1

使用div标签代替表单标签。

---

将按钮类型更改为button 。

<button type="button">Upload Image</button>

---

修改代码，如下所示。

<div class="m-b-18px">
  <div class="col-m-12">
    <a (click)="readRecipes()" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-plus"></span>Read Recipes
    </a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
      <table class="table table-hover table-responsive table-bordered">
        <tr>
          <td>
            Name
          </td>
          <td>
            <input name="name" formControlName="name" type="text" class="form-control" required />
            <div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
              class="alert alert-danger">Name is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Description
          </td>
          <td>
            <textarea name="description" formControlName="description" class="form-control" required>

            </textarea>
            <div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
              class="alert alert-danger">
              Description is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Image
          </td>
          <td>
            <input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
            <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
            <input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
          </td>
        </tr>



        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
                <span class="glyphicon glyphicon-plus"></span> Create
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 2

如果要在表单标签内使用按钮标签，请在按钮标签内添加type="button" 。

<button type="button"></button>

这将完美地工作

Answer 3

您不应该在 Angular 文件夹中上传文件，例如 (Assets) ，因为每次将新文件添加到 Angular 环境时它都会重新编译，这会导致您不想要的页面刷新。