Question

我使用 VueJS 和 Laravel 5.3 撰写单页应用程序。

我使用Laravel 5.3开发了我的后端API端点，并且我不熟悉前端开发，例如vueJS。我正在尝试使用VueJS和Laravel 5.3上传多个文件。

Answer 1

这可能比您需要的时间晚，但它可能仍然会帮助那些寻找此事的人。

首先，使用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项目中。

您可以在Medium中找到更多详细信息： https://medium.com/@adnanxteam/how-to-upload-multiple-files-via-ajax-vuejs-and-laravel-5-5-file-management-d218c3bbb71c

Answer 2

如果您不想使用插件，可以使用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 3

首先您应该像这样导入axios

import axios from 'axios';

在您的app.js中

然后您的组件看起来像

<template>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">VUe Example Component</div>

                <div class="panel-body">
                        <legend>Upload form</legend>

                        <div class="form-group">
                            <label>Upload Files</label>
                            <input id="upload-file" type="file" multiple class="form-control" @change="fieldChange">
                        </div>




                        <button class="btn btn-primary" @click="uploadFile">Submit</button>

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data(){
      return {
          attachments:[],
          form: new FormData
      }
    },
    methods:{
        fieldChange(e){
            let selectedFiles=e.target.files;
            if(!selectedFiles.length){
                return false;
            }
            for(let i=0;i<selectedFiles.length;i++){
                this.attachments.push(selectedFiles[i]);
            }
            console.log(this.attachments);
        },
        uploadFile(){
            for(let i=0; i<this.attachments.length;i++){
                this.form.append('pics[]',this.attachments[i]);
            }
            const config = { headers: { 'Content-Type': 'multipart/form-data' } };
            document.getElementById('upload-file').value=[];
            axios.post('/upload',this.form,config).then(response=>{
                //success
                console.log(response);
            })
                .catch(response=>{
                    //error
                });
        }
    },
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

这对我有用

使用VueJS AJAX和Laravel 5.3上传多个文件

3 个答案: