image - 无法使用 VueJS 将文件传递给 Laravel Controller

标签 image laravel vue.js vuejs2 vue-component

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

<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 Controller ,但文件数据没有进入提交函数。下面的 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;
  });
},

我是否遗漏了提交功能中的某些内容?

最佳答案

您没有将 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;
  });
},

关于image - 无法使用 VueJS 将文件传递给 Laravel Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42005510/

相关文章:

flutter - 在 Flutter 中,如何使我的 FadeInImage 适合具有圆边的父容器?

php - 从 Laravel 5.2 升级到 5.3 时登录时方法 [用户名] 不存在

php - Laravel:PDO 异常,即使已安装和测试驱动程序也找不到驱动程序

php - laravel 自定义异常处理

javascript - 如何在vuejs中导入node_modules的所有css

C# Image.Clone 内存不足异常

html - 图像 - CSS、HTML

Python:沿着边界从图像中裁剪出区域

javascript - 将 Google 身份验证添加到 Firebase 实时数据库

javascript - 如何在不调用API的情况下设置Vuex数据?