Upload multiple file with vue js and axios
30,606
Solution 1
You forgot to use $refs
. Add ref
to your input:
<input type="file" ref="file" multiple="multiple">
Next, access your files like this:
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(){
});
},
This should be works.
Solution 2
If anyone wondering, "How can I send also data with it", there you go:
formData.append('name[' + this.name + ']', name);
formData.getAll('files', 'name');
Author by
weaver
Updated on July 09, 2022Comments
-
weaver almost 2 years
I am trying to upload multiple images using vuejs and axios but on server side i am getting empty object. I added multipart/form-data in header but still empty object.
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>
My Server side code:
class FileSettingsController extends Controller { public function upload(Request $request){ return $request->all(); } }
Output:
{files: [{}]} files: [{}] 0: {}
Console.log() result:
File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …}
-
Daniel about 5 yearsWhat about
dd($request->file('files'))
in your controller? What output have you got? -
weaver about 5 years
array:1 [ 0 => UploadedFile {#756 -test: false -originalName: "540340.jpg" -mimeType: "image/jpeg" -error: 0 #hashName: null path: "C:\xampp\tmp" filename: "php44C8.tmp" basename: "php44C8.tmp" pathname: "C:\xampp\tmp\php44C8.tmp" extension: "tmp" realPath: "C:\xampp\tmp\php44C8.tmp" aTime: 2019-02-04 16:32:27 mTime: 2019-02-04 16:32:27 type: "file" writable: true readable: true executable: false file: true dir: false link: false linkTarget: "C:\xampp\tmp\php44C8.tmp" } ]
-
Daniel about 5 yearsSo you got it, now you need to store them.