如何从Vue.js上传音频文件Laravel？

Question

我试着上传的音频文件的图像等，但没有奏效。如何从音频文件中提取数据，并将其发送到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 type="file" id="inputName" name="inputName"  v-on:change="fileData(this)" />

在变化：

fileData(element){
   var filedata = $(element).prop("files")[0];
   var fileName = file_data.name;
   var fileExtension = fileName.split('.').pop().toLowerCase();
}

Answer 2

你可以试试下面的代码：

输入：

<input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>

对文件的变化：

handleFileUpload(){
    this.file = this.$refs.file.files[0];
}

最后，在表单提交：

    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');
        });