How to upload audio file from Vue.js to Laravel? - laravel

Question

I tried uploading an audio file like an image, but it didn't work. How do I extract data from an audio file and send it to Laravel?
<input
type="file"
class="user-edit-form browse-file"
accept=".mp3,audio/*"
#change="uploadSong"
>
uploadSong (e) {
console.log(e)
this.songUpload = e.target.files[0]
if (!this.songUpload.length) {
return
}
this.createSong(this.songUpload[0])
},
createSong (file) {
let reader = new FileReader()
let vm = this
reader.onload = (e) => {
vm.song = e.target.result
console.log(e.target.result)
}
reader.readAsDataURL(file)
}

Answer 1

Input:
<input type="file" id="inputName" name="inputName" v-on:change="fileData(this)" />
On Chnage:
fileData(element){
var filedata = $(element).prop("files")[0];
var fileName = file_data.name;
var fileExtension = fileName.split('.').pop().toLowerCase();
}

Answer 2

You can try below code:
Input:
<input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
on file change:
handleFileUpload(){
this.file = this.$refs.file.files[0];
}
Finally on form submit:
submitAudioFile(){
let formData = new FormData();
// add file
formData.append('file', this.file);
axios.post( '/upload',
formData,
{
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
}
}
)
.then(function(){
console.log('success');
})
.catch(function(){
console.log('failed');
});