は私が<strong>VueJS</strong>と<strong>Laravel 5.3</strong>を使用して単一ページのアプリケーションを書いている5.3

Question

VueJS AJAXとLaravelを使用して複数のファイルをアップロードします。

Laravel 5.3を使用してバックエンドAPIエンドポイントを開発しましたが、vueJSなどのフロントエンド開発には不向きです。私はVueJSとLaravel 5.3を使って複数のファイルをアップロードしようとしています。

Answer 1

プラグインを使用したくない場合は、FormDataを使用してプラグインを使用できます。

例：

// hmtl 
<input type="file" multiple ref="file_input" @change="uploadFiles"> 


//Javascript 
uploadFiles() { 
    // get the input 
    let files = this.$refs.file_input.files 

    // assuming you are using the default lint you'll need to add these 
    /* global FormData */ 
    /* eslint no-undef: 2 */ 
    let data = new FormData 

    for (let i = 0; i < files.length; i++) { 
    data.append('input_name[]', files[i]) 
    } 

    // assuming you are using vue-resource 
    this.$http('url', data).then(response => { 
    // handle response 
    }).catch(err => { 
    // handle error 
    }) 

} 

チェックフィドルは： https://jsbin.com/hozuwamoci/

Answer 2

これは後で、あなたがそれを必要以上に来るかもしれない、しかしそれはまだ、このためにことになるだろう人々を助けるかもしれません。

まず、axiosライブラリを使用して、ファイルをフロントエンドからバックエンドに送信します。

Javascript側でFormDataを使用していることを確認してください。

ここでは、アップロードを処理してサーバーに送信するのに役立つコードを示します。

< input type = "file" 
multiple = "multiple" 
id = "attachments" 
@change = "uploadFieldChange" > 

    // This function will be called every time you add a file 
    uploadFieldChange(e) { 

     var files = e.target.files || e.dataTransfer.files; 
     if (!files.length) 
      return; 

     for (var i = files.length - 1; i >= 0; i--) { 
      this.attachments.push(files[i]); 
     } 

     // Reset the form to avoid copying these files multiple times into this.attachments 
     document.getElementById("attachments").value = []; 
    } 

submit() { 

    this.prepareFields(); 

    var config = { 
     headers: { 
      'Content-Type': 'multipart/form-data' 
     }, 
     onUploadProgress: function (progressEvent) { 
      this.percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total); 
      this.$forceUpdate(); 
     }.bind(this) 
    }; 

    // Make HTTP request to store announcement 
    axios.post(this.settings.file_management.upload_files, this.data, config) 
     .then(function (response) { 
      console.log(response); 
      if (response.data.success) { 
       console.log('Successfull Upload'); 
       toastr.success('Files Uploaded!', 'Success'); 
       this.resetData(); 
      } else { 
       console.log('Unsuccessful Upload'); 
       this.errors = response.data.errors; 
      } 
     }.bind(this)) // Make sure we bind Vue Component object to this funtion so we get a handle of it in order to call its other methods 
     .catch(function (error) { 
      console.log(error); 
     }); 

} 

完全なソリューションには、さらにいくつかのコード行があり、Laravelプロジェクトでラップされています。

あなたはミディアムで詳細を見つけることができます：https://medium.com/@adnanxteam/how-to-upload-multiple-files-via-ajax-vuejs-and-laravel-5-5-file-management-d218c3bbb71c