Данные формы с файлом изображения не публикуются в URL - PullRequest
Новая
       8

Данные формы с файлом изображения не публикуются в URL

0 голосов
/ 05 сентября 2018

Я пытаюсь отправить данные формы в 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>

1 Ответ

0 голосов
/ 05 сентября 2018

Если для отправки этого запроса вы используете только 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);
    });
}

UPDATE:

Сначала было несколько проблем с вашим кодом, которые я исправил в обновленном стеке.

URL-адрес API, который вы указали, размещен на HTTP, а проект размещен на HTTPS. Таким образом, браузер заблокирует запрос API, выдав ошибку смешанного содержимого.

Если я попытаюсь изменить его с HTTP на HTTPS, он выдаст мне ошибку CORS, что означает, что вам придется добавить в белый список свой домен на этом API, чтобы он работал.

Вот Обновленный StackBlitz .

...