无法使用 VueJS 将文件传递给 Laravel 控制器

Question

我有一个简单的表单，其中包含文件上传和文本输入，如下所示：

<form v-on:submit.prevent="createStatus" method="post" enctype="multipart/form-data">

    <div class="Image-input__input-wrapper">
        <input @change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file">
    </div>
            <div v-bind:class="{'form-group': true, 'has-error': errors.description}">
                <label>Status Description:</label>
                <input type="text" class="form-control" v-model="newStatus.description">
                <span class="help-block" v-for="error in errors.description">{{ error }}</span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Save New Status</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </form>

选择文件时，使用 previewThumbnail 方法预览图像。

previewThumbnail: function(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var vm = this;
        reader.onload = function(e) {
            vm.imageSrc = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
    console.log(input.files[0]);
    this.newStatus.image = input.files[0];
    console.log(this.newStatus.image);
},

在控制台中我得到了文件数据。然后，我需要将此数据传递给 laravel 控制器，但文件数据没有进入提交功能。下面的 createStatus 方法在表单提交时调用，当返回响应时，传递给 url 的 newStatus.image 为空。

createStatus(){
  var formData = new FormData();
  formData.append('image', this.newStatus.image);
  formData.append('description', this.newStatus.description);
  axios.post('/api/statuses', formData).then(response => {
      console.log(response.data);
  }, response => {
      this.formErrors = response.data;
  });
},

我在提交功能中遗漏了什么吗？

Answer 1

您没有将 form 传递给 new FormData。

如果您传递事件参数并使用目标（正在提交的表单），您将获得 FormData

createStatus(e){
  var formData = new FormData(e.target);
  formData.append('image', this.newStatus.image);
  formData.append('description', this.newStatus.description);
  axios.post('/api/statuses', formData).then(response => {
      console.log(response.data);
  }, response => {
      this.formErrors = response.data;
  });
},

无法使用 VueJS 将文件传递给 Laravel 控制器

Cannot pass file to Laravel controller with VueJS

image

laravel

vue.js

vue-component

vuejs2