Question

我正在尝试在“构建论坛”视频系列之后创建一个头像编辑器。

我正在使用Laravel 5.8.34。

#handleFileUpload（e）＃方法中的console.log显示上传的文件。

上传的图像出现在页面上。

#persist（file）＃方法中的console.log显示一个空对象。

DATA FormData {}

上传不持久。

我的控制器方法：

public function avatar_upload($id)
    {
        $validate = request()->validate([
            'avatar' => ['required', 'image']
        ]);

        $emp = Employee::with('user')->where('user_id', $id)->first();
        $avatar = $emp->user->firstName . $emp->user->lastName . '.png';

        Storage::disk('spaces')
            ->putFileAs('avatars', request()->file('avatar'), $avatar, 'public');

        $emp->avatar = $avatar;
        $emp->save();

        return response([], 204);
    } // end function

我的组件：

<template>
    <div>
        <div class="text-center mb-4">

            <div class="flex justify-center font-thin text-grey-dark text-2xl">
                {{user.office}}
            </div>

            <div class="text-center">
                <img class="relative rounded-lg"
                    :src="avatar">
            </div>
            <form @submit.prevent="handleFileUpload"
                  enctype="multipart/form-data"
                  v-if="canEdit">
                <input
                    type="file"
                    name="avatar"
                    ref="file"
                    accept="image/png"
                    class="tw-input"
                    @change="handleFileUpload">
            </form>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        name: 'AvatarReplace',
        data() {
            return {
                canEdit: true,
                avatar: this.user.avatar
            };
        },
        props: ['user'],
        methods: {
            handleFileUpload(e) {
                if(! e.target.files.length) { return; } // end if

                let file = e.target.files[0];
                console.log('FILE', file);

                let reader = new FileReader();

                reader.readAsDataURL(file);

                reader.onload = e => {
                  this.avatar = e.target.result;
                };

                this.persist(file);
            },
            persist(file) {
                let data = new FormData();

                data.append('avatar', file);
                console.log('DATA', data);

                let path = `/api/staff/avatar_upload/${this.user.id}`;
                axios.post(path, data)
                    .then((rsp) => {
                        //console.log(rsp);
                        //this.$toastr.s('File Uploaded');
                    });

            }
        }
    };
</script>

Answer 1

这不是正常形式，使axios知道content-type是multipart/form-data

axios.post(path, data, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
}).then((response) => {
   //
});

FormData对象不接收文件

1 个答案: