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

您没有将DecrementInventoryActivity传递给form。

如果您传递了event参数并使用了目标（正在提交的表单），那么您将获得new FormData

FormData

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

1 个答案: