Question

我正在开发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_dump后立即尝试了$resume file()，我看到输出到控制台的内容是一堆js代码从我阅读的所有内容来看，使用Laravel进行文件上传非常简单，我不知道为什么会遇到这个问题。任何帮助/建议将不胜感激！谢谢！

Answer 1

首先，您的文件输入需要具有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处理文件真的很轻松 - 您只需要确保实际上将它们送到服务器;）

Laravel SparkForm文件上传错误

1 个答案: