Блог

Мне нужно загрузить изображение в Strapi. У меня есть таблица с именем book и тремя полями: b_type, b_num, b_image. Однако код состояния равен 500, но без нажатия кнопки b_image он равен 200.

 let file
    const ImageUpload = () =>{
        let box = document.querySelector('.popup_win')
        let uploadField = document.querySelector('.upload')
        uploadField.addEventListener('change', (e) =>{
            file = e.currentTarget.files[0]
            checkType(file)
        })
     }
const finish = ()=>{
        const form = new FormData()
        form.append('b_image', file)
        form.append('b_num', 3)
        form.append('b_type', 'student')

        axios.post('http://localhost:1337/books', form, {
            headers: {'Content-Type': 'multipart/form-data'}
        })
        .then((response) => {
            console.log(response.data)

        })
        .catch((e) => {
            console.log(e)
        })
        document.querySelector('.popup').style.display='none'
    }
  

Вот документация о загрузке файла, которая может вам помочьhttps://strapi.io/documentation/3.x.x/guides/upload.html#file-upload.

Итак, сначала вам нужно создать свою Book запись без вашего изображения.

И затем вы должны загрузить свои файлы и указать запись, которую вы хотите связать.

Таким образом, для этого будет 2 запроса.

Вот пример https://strapi.io/documentation/3.x.x/guides/upload.html#examples Мы связываем изображение с существующей статьей.

Потребовалось некоторое время, чтобы разобраться, но вот как я это сделал:

 const submitUpload = e => {
  e.preventDefault();

  const formData = new FormData(e.target);

  axios.post("http://localhost:1337/images", {})
    .then(res => {
      console.log(res);

      formData.append('refId', res.data.id);

      axios.post(`http://localhost:1337/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(err => {
      console.log(err);
    });
}

return (
  <form id='form' onSubmit={e => submitUpload(e)}>
    <input type="file" name="files" />
    <input type="text" name="ref" value="image" />
    <input type="text" name="field" value="image" />
    <input type="submit" value="Submit" />
  </form>
)
  

Здесь приведены значения ref и refId входных значений https://strapi.io/documentation/3.x.x/guides/upload.html#examples.