表单数据，图像文件未发布到url angular

Question

我正在尝试将表单数据发送到php url，但它不是发布。它可以正常使用HTML代码。但不是有角度的工作

角度代码：

   const payload = new FormData();
   payload.append('name', this.author);
   payload.append('image', this.selectedFile, this.selectedFile.name);

   this.http
     .post(`request-url`,
     payload,
      {
          headers : {
              'Content-Type' : 'multipart/form-data'
          }
      }
    ).subscribe((data: any) => {
      this.resData = data;
      console.log(this.resData);
    });

HTML工作代码

<form method="POST" action="request-url" enctype="multipart/form-data">
    <input type="hidden" name="size" value="1000000">
    <div>
      <input type="file" name="image">
    </div>
    <div>
      <input
        id="textauthor"
        name="name" 
        placeholder="Name"></input>
        <button type="submit" name="upload">POST</button>
    </div>
  </form>

Answer 1

如果您只依靠HTML来发送该请求，那么它将没有问题。但是既然你希望它通过组件代码，你将必须绑定到ngSubmit的form事件。这将调用TypeScript类中的函数。在这例如。这是onSubmit。

<form (ngSubmit)="onSubmit()">
  <input type="hidden" name="size" value="1000000">
  <div>
    <input type="file" name="image">
  </div>
  <div>
    <input id="textauthor" name="name" placeholder="Name"></input>
    <button type="submit" name="upload">POST</button>
  </div>
</form>

这里是打字稿：

onSubmit() {
  const payload = new FormData();
  payload.append('name', this.author);
  payload.append('image', this.selectedFile, this.selectedFile.name);

  this.http
    .post(`request-url`,
      payload, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    ).subscribe((data: any) => {
      this.resData = data;
      console.log(this.resData);
    });
}

更新：

首先，你的代码存在一些问题，我在更新的stackblitz中修复了这个问题。

当项目在HTTPS上托管时，您提供的API URL托管在HTTP上。因此，浏览器将通过提供混合内容错误来阻止API请求。

如果我尝试将其从HTTP更改为HTTPS，那么它会给我一个CORS错误，这意味着您必须在该API上将您的域列入白名单才能使其正常工作。

这是一个Updated StackBlitz。