Question

我正在使用VueJS，Laravel 5.3和Passport身份验证模块开发SPA。

我的代码到现在为止。我可以选择文件名。工作正常，但如何发送选定的文件以发出请求将文件上传到服务器？

<script>
  import {mapState} from 'vuex'
  export default{
    computed: {
      ...mapState({
        userStore: state => state.userStore
      })
    },
    data () {
      return {
        fax: {
          files: '',
          image: ''
        }
      }
    },
    methods: {
      onFileChange (e) {
        this.fax.files = e.target.files || e.dataTransfer.files
        if (!this.fax.files.length) {
          return
        }
        console.log(this.fax.files)
      }
    },
    created () {
      this.$store.dispatch('setUserDid')
    }
  }
</script>

<template>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple @change="onFileChange">
<input type="text" name="group" >

<ul>
    <li v-for="file in fax.files">
        {{ file.name }}
    </li>
</ul>  
</template>

到目前为止，我可以使用{{fax.files}}在我的页面上显示文件名。 如何发布帖子请求以便我可以从我的服务器端（API端点）捕获文件？我尝试使用谷歌搜索和编码，但我无法做到。

Answer 1

好的，我设法让这个工作。在文件上传之前，我有一个我通过Ajax发布的数组，如下所示。为了处理文件上传，我将其修改为如下所示。

基本上，您需要在上传文件时通过FormData对象发送。在提交表单时默认使用FormData对象 - 但是当只发布数组时，您需要先将这些数组值附加到FormData对象。

你应该能够理解下面的代码......

var formData = new FormData();

                jQuery.each(this.comment.file, function(i, file) {
                    formData.append('file[]', file);
                });
                formData.append('body', this.comment.body);
                formData.append('comments_room_id', this.comment.comments_room_id);
                formData.append('id', this.comment.id);
                formData.append('name', this.comment.name);

                this.$http.post('/api/comment/store', formData).then(function (response) {

如何使用VueJS和Laravel 5.3上传文件

1 个答案: