首页 > 解决方案 > Laravel Spark 图像文件上传字段问题

问题描述

我正在迁移到 Laravel Spark。在个人资料设置页面上,我正在尝试添加图像上传字段。由于配置文件使用 VueJS,我不确定如何处理这个问题。我已按照文档添加普通文本字段,但无法上传图像文件。

刀片形式

<!-- confirm_splash - Image File -->
<div class="form-group row justify-content-center">
    <div class="col-md-6 d-flex align-items-center">
        <div class="image-placeholder mr-4">
            <span role="img" class="profile-photo-preview" :style="previewStyle"></span>
        </div>
        <div class="spark-uploader mr-4">
            <input ref="confirm_splash" type="file" class="spark-uploader-control" name="confirm_splash"  :disabled="form.busy">
            <div class="btn btn-outline-dark">{{__('Update Photo')}}</div>
        </div>
        <span class="invalid-feedback" v-show="form.errors.has('confirm_splash')">
            @{{ form.errors.get('confirm_splash') }}
        </span>
    </div>
</div>

更新配置文件详细信息 - VueJS 组件 不确定我是否需要在方法中添加一个函数来获取图像文件。

Vue.component('update-profile-details', {
    props: ['user'],

    data() {
        return {
            form: new SparkForm({
                business_name: '',
                confirm_splash: ''
            })
        };
    },

    mounted() {
        this.form.confirm_splash = this.user.confirm_splash;
    },

    methods: {
        update() {
            Spark.put('/settings', this.form)
                .then(response => {
                    Bus.$emit('updateUser');
                });
        }
    }
});

Profile Details Controller 这最初在提交表单时没有使用 VueJS。我正在使用作者 ID 将上传的图像添加到可管理的目录中。

public function update(Request $request)
{
    $this->validate($request, [
        'business_name' => 'required|min:1',
    ]);

    //Get the current user ID
    $data['id'] = Auth::user()->id;
    $authorID = $data['id'];
    $file = request()->file('confirm_splash');

    if($file) {
    $fileExtension = $file->extension();
    $unique_name = md5($file. time()).'.'.$fileExtension;

    $fileImg = $file->storeAs('/public/profile/' . $authorID, $unique_name);
    $filePub = '/profile/'. $authorID."/".$unique_name;

    };

    if(!$file) {
      $filePub = '';
    }

    $request->user()->forceFill([
        'business_name' => $request->business_name,
        'confirm_splash' => $filePub,
    ])->save();
}

标签: phplaravelvue.jslaravel-spark

解决方案


推荐阅读