how to send multiple files from Vue js to PHP

Question

<form method="POST" @submit.prevent="share" >
            <div id="imgs">
            
            Select Images: <input type="file" ref="file" name="file[]" multiple ></form>

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

    
        axios.post('http://localhost/11/upload_img.php',formData,{
            headers:{'Content-Type':'multipart/form-data'}
        }).then((res)=>{
            console.log("sent");
            
        });
    }}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<form method="POST" @submit.prevent="share" >
                <div id="imgs">
                
                Select Images: <input type="file" ref="file" name="file[]" multiple >

i send files in vue js like above and here is my PHP codes$filename=$_FILES['file']['name'];

$files=$_FILES['file'];

echo($files);

and i get this error

Notice: Undefined index: file in C:\xampp\htdocs\11\upload_img.php on line 6

Debuqer Debuqer · Accepted Answer · 2021-03-31T09:29:02

It seems like you did not set "multipart/form-data" for your form enctype attribute, so you wont get $_FILES['file'] in backend side

check What does enctype='multipart/form-data' mean?

how to send multiple files from Vue js to PHP

1 Answers