首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Laravel SparkForm文件上传错误

Laravel SparkForm文件上传错误
EN

Stack Overflow用户
提问于 2016-09-04 07:01:32
回答 1查看 634关注 0票数 1

我正在做一个Laravel Spark项目,我正在尝试获取一个表单,以便将文件夹上传到我的S3存储桶中。我已经构建了表单:

代码语言:javascript
运行
复制
<form enctype="multipart/form-data">
   <input type="file" name="resume" v-model="form.resume">
   <button @click="updateProfile">Update Profile</button>
 </form>

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

代码语言:javascript
运行
复制
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控制器中:

代码语言:javascript
运行
复制
$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我在将它设置为file()之后尝试了var_dumping $resume,我看到输出到控制台的是一堆从我读到的所有东西看起来像是js的代码,看起来用Laravel上传文件非常容易,我不知道为什么会有这个问题。如有任何帮助/建议,我们将不胜感激!谢谢!

EN

回答 1

Stack Overflow用户

发布于 2016-10-13 18:39:51

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

在您的例子中,它应该是<input type="file" name="form" v-el:resume />

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

将此代码添加到您的methods对象:

代码语言:javascript
运行
复制
gatherFormData() {
    const data = new FormData();

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

    return data;
}

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

代码语言:javascript
运行
复制
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处理文件真的是轻而易举,- you只需要确保你真的把它们送到服务器上;)

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39312044

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档