1

我正在开发一个 Laravel Spark 项目，我正在尝试获取一个表单来将文件夹上传到我的 S3 存储桶。我已经建立了表格：

<form enctype="multipart/form-data">
   <input type="file" name="resume" v-model="form.resume">
   <button @click="updateProfile">Update Profile</button>
 </form>

然后我设置了一个 vue 组件来处理表单提交：

Vue.component('resume-links', {
    template: '#edit-resume-links',
    data() {
    return {
        form: new SparkForm({
          resume: ''
        })
    };
},
methods: {
  updateProfile() {
    console.log(this.form.resume);
    Spark.post('/route/to/controller', this.form).then(response => {
      console.log(response);
    });
  }
}
});

然后在我的 laravel 控制器中：

$resume = $request->file('resume');

$resumeFileName = time() . '.' . $resume->getClientOriginalExtension();

$s3 = \Storage::disk('s3');
$filePath = '/resumes/' . $resumeFileName;
$s3->put($filePath, file_get_contents($resume), 'public');

当我尝试使用文件提交表单时，它会抛出此错误： Call to a member function getClientOriginalExtension() on null 我在将其设置为后立即尝试var_dumping并且我看到输出到控制台的是一堆外观代码 从我阅读的所有内容来看，它看起来像文件上传Laravel 超级简单，我不知道我为什么会遇到这个问题。任何帮助/建议将不胜感激！谢谢！$resumefile()js

4

1 回答 1

2

首先，您的文件输入需要具有v-el属性而不是v-model.

在你的情况下，它会是<input type="file" name="form" v-el:resume />.

接下来，在您的 Vue 组件中，您需要收集 FormData 以便可以将文件发送到服务器。文件的处理方式必须与纯文本字段等稍有不同。

将此添加到您的methods对象中：

gatherFormData() {
    const data = new FormData();

    data.append('resume', this.$els.resume.files[0]);

    return data;
}

在您的updateProfile方法中，您现在需要将此数据作为 POST 请求发送到服务器。

updateProfile(e) {
        e.preventDefault();

        var self = this;

        this.form.startProcessing();

        $.ajax({
            url: '/route/to/controller',
            data: this.gatherFormData(),
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            headers: {
                'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
            },
            success: function (response) {
                self.form.finishProcessing();

                console.log(response)
            },
            error: function (error) {
                self.form.setErrors(error.responseJSON);
            }
        });
    },

最后，在您的控制器方法中，您现在可以正常处理文件

（例如，$request->file('resume');）

用 Laravel 处理文件真的是轻而易举——你只需要确保你真的把它们送到服务器上；）

于 2016-10-13T10:39:51.013 回答