Блог

Я пытаюсь загрузить файл и текст с помощью формы, но файл не загружался, но он работает с postman.

Кто-нибудь знает о проблеме? Спасибо

Функция Axios :

 postArticles : (content, attachment, headers) => {
  return axios.post(baseUrl   "/", {content, attachment}, {headers} )
}
  

 const headers = {
    'Authorization': localStorage.getItem('token'),
};

  

this.state.attachment = null

 state = {
    errors : [],
    content: '',
    attachment: null,
    redirect: false
}

handleSubmit = (event) => {
    event.preventDefault();

    let data = new FormData(event.target);

    data.append("content", this.state.content);
    data.append("attachment", this.state.attachment);

    let allData = {}
    for (let [key, value] of data) { 
        allData[key] = value
    }

    articlesAPI.postArticles(allData["content"], allData["attachment"], headers)
        .then(() => {
            console.log("Article ajouté")
           this.setState({ redirect: true })
        })
        .catch(err => console.log(err))
}

// onChange listener
handleOnFileChange = (e) => {
    
    this.setState({ attachment: e.target.files[0] });
    console.log(this.state.attachment)

}

//form

<Form encType='multipart/form-data' onSubmit={this.handleSubmit} id='form' >
  <FormGroup>
    <Label for="content">Text</Label>
    <Input
      type="textarea"
      name="content"
      placeholder="Le contenu du post"
      required
      value={this.state.content}
      onChange={this.handleChange}
    />
    {/* <span style={{color: "red"}}>{this.state.errors["content"]}</span> */}
  </FormGroup>
  <FormGroup>
    <Label for="attachment"></Label>
    <Input
      type="file"
      name="attachment"
      id="attachment"
      onChange={this.handleOnFileChange}
    />
    {/* <span style={{color: "red"}}>{this.state.errors["file"]}</span> */}
  </FormGroup>
  <Button type="submit" color="secondary" size="lg" block>Publier</Button>
</Form>
  

Объект FormData содержит множество функций для генерации тел HTTP-запросов.

Используй его!

Не пытайтесь копировать содержимое из объекта FormData в обычный объект, а затем отправлять этот простой объект. Это делает создание объекта FormData совершенно бессмысленным.

 let data = new FormData(event.target);
data.append("content", this.state.content);
data.append("attachment", this.state.attachment);
axios.post(baseUrl   "/", data, {headers} )