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的{{1}}事件。这将在您的TypeScript类中调用一个函数。在这个例如。是form。

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>

更新：

首先，您的代码存在一些问题，我已在更新的Stackblitz中修复了该问题。

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

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

这里是Updated StackBlitz。

带有图像文件的表单数据未发布到url angular

1 个答案:

更新：