Téléchargement de plusieurs fichiers avec vue js et axios

Question

J'essaie de télécharger plusieurs images en utilisant Vuejs et Axios, mais du côté du serveur, j'obtiens un objet vide. J'ai ajouté multipart/form-data dans l'en-tête mais l'objet reste vide.

submitFiles() {
    /*
      Initialize the form data
    */
    let formData = new FormData();

    /*
      Iteate over any file sent over appending the files
      to the form data.
    */
    for( var i = 0; i < this.files.length; i++ ){
      let file = this.files[i];
      console.log(file);
      formData.append('files[' + i + ']', file);
    }

    /*`enter code here`
      Make the request to the POST /file-drag-drop URL
    */
    axios.post( '/fileupload',
      formData,
      {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
      }
    ).then(function(){
    })
    .catch(function(){
    });
  },

HTML :

<form method="post" action="#" id="" enctype="multipart/form-data">
    <div class="form-group files text-center" ref="fileform">
        <input type="file"  multiple="multiple">
        <span id='val'></span>
        <a class="btn"  @click="submitFiles()" id='button'>Upload Photo</a>
        <h6>DRAG & DROP FILE HERE</h6>
    </div>

Mon code côté serveur :

class FileSettingsController extends Controller
{
    public function upload(Request $request){
        return $request->all();
    }
}

Sortie :

{files: [{}]}
files: [{}]
0: {}

Console.log() résultat : File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …}

Answer 1

Vous avez oublié d'utiliser $refs . Ajouter ref à votre contribution :

<input type="file" ref="file" multiple="multiple">

Ensuite, accédez à vos fichiers comme ceci :

submitFiles() {

    let formData = new FormData();

    for( var i = 0; i < this.$refs.file.files.length; i++ ){
        let file = this.$refs.file.files[i];
        formData.append('files[' + i + ']', file);
    }

    axios.post('/fileupload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
      }
    ).then(function(){
    })
    .catch(function(){
    });
},

Cela devrait être des travaux.

Answer 2

Si quelqu'un se demande "Comment puis-je envoyer des données avec ce système", voilà :

formData.append('name[' + this.name + ']', name);
formData.getAll('files', 'name');