2
votes

Comment envoyer un ou plusieurs fichiers à une API en utilisant axios dans React js?

J'essaie d'envoyer un ou plusieurs fichiers (pdf, doc, xls, txt ...) après les avoir stockés dans l'état du composant, à l'aide de hooks, à une API. Les fichiers sont enregistrés avec un "type" de fichier, quelque chose comme ce qui suit:

L'objet d'état est composé du nom de fichier (clé) et à l'intérieur de sa clé se trouve le fichier (ajouté à l'aide de react-dropzone) et le type de fichier (un nombre)

J'ai essayé d'envoyer les fichiers en utilisant formData mais en essayant de faire la requête POST, j'obtiens une erreur 402 {"status": "fail", "data": [{"files": "The files field is required."} ]}

C'est ce que j'essaye:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const [files, setFiles] = useState({});

const sendFiles = () =>{

    let headers = {
        Authorization: token
    };

    let data = new FormData();
    
    //files is my state
    for(let key in files){
      data.append(key, files[key])
    }

axios
    .post(
        "/some-url/new-files",
        {
          report_id:6, //This is necessary
          
          files: data
        },
        { headers }
    )
    .then(response => {
        let { data } = response.data;
        console.log(data);
      
    })
    .catch(error => {
        console.log(error)
    });
  }



}

javascript reactjs axios post form-data

0 commentaires

3 Réponses :

1
votes

Ajouter aux en-têtes Content-Type multipart / form-data,

axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

2 commentaires

Comment puis-je combiner cela avec les "en-têtes" que j'avais déjà (un jeton nécessaire pour pouvoir utiliser l'API)?

Cause I get this error: Missing boundary in multipart / form-data POST data

0
votes

let headers = {
        Authorization: token,
       "Content-Type": "application/json",
    };

1 commentaires

merci, mais j'obtiens toujours l'erreur: 422 {"status": "fail", "data": [{"files": "Le champ des fichiers est obligatoire."}]}

2
votes

 let headers = {
        Authorization: "token",
        'Content-Type':'multipart/form-data'
    };

let formData = new FormData();

 for(let key in files){
 
  formData.append('files[][file]', files[key].file, files[key].file.name)
  formData.append('files[][file_type_id]', files[key].fileType)
}

axios
    .post(
        "/api/files",
       formData,
        { headers }
    )
    .then(()=>{console.log('It Works')})

0 commentaires