Блог

В настоящее время пытаюсь использовать класс загрузки изображений, который я создал на php, который сохраняет изображение в папку и текстовый файл, но я хочу сохранить его из api, который я вызываю на Javascript, а не путем отправки формы.

Здесь я пытаюсь вызвать api

 async function createTweet(e) {
  const id = document.getElementById('user-id').getAttribute('data-user-id');

  const tweet = e.target.parentNode.parentNode.querySelectorAll('input')[1]
    .value;
  const image = e.target.parentNode.parentNode.querySelectorAll('input')[0];
  console.log(image);

  const data = new FormData();
  data.append('userId', id);
  data.append('tweet', tweet);
  data.append('tweet-image', image);

  try {
    const conn = await fetch('php/api/api-create-tweet.php', {
      method: 'POST',
      body: data,
    });

    const res = await conn.text();
    getData();
    // TODO show user he has created a tweet
  } catch (error) {
    console.log(error);
  }
}
  

Просто интересно, что я могу сделать с изображением, чтобы я мог прочитать файл в моем api с помощью $ _FILES[‘tweet-image’] и нужно ли мне что-либо сделать с данными формы, чтобы придать им тип формы enctype

Код должен работать с некоторыми изменениями. У вас есть два способа сделать это (см. FormData @ developer.mozilla.org ):

Допустим, у вас есть простая форма:

 <!-- just an example -->
<form method="post" action="form.php"  enctype="multipart/form-data">
    <input type="text" name="tweet" />
    <input type="file" name="image" />    
    <input type="submit" />
</form>
<script>
/* prevent sending the form */
var form = document.forms[0];
form.onsubmit = function(e) {
    e.preventDefault();
    sendForm();
}
</script>
  

A. импорт <form> непосредственно в FormData() :

 <script>
async function sendForm() {
    // import form input here ->
    const data = new FormData(form);
    const conn = await fetch('form.php', {
      method: 'POST',
      body: data
    });
    const res = await conn.text();
}
</script>
  

B. убедитесь, что вы действительно добавляете .files[0] из input[type="file"] в formData() :

 <script>
async function sendForm() {

    const data = new FormData();

    const tweet = form["tweet"].value;
    // notice the use of .files[0] -->
    const image = form["image"].files[0];

    data.append("tweet", tweet);
    data.append("image", image);

    const conn = await fetch('form.php', {
      method: 'POST',
      body: data
    });
    const res = await conn.text();
}
</script>
  

Тогда в вашем PHP-файле вы должны иметь доступ как $_POST["tweet"] к (тексту), так и $_FILES["image"] к (файлу) в этом примере.