Laravel+Inertia+Vue应用部分图片无法上传的问题求助

我开发了一个基于Laravel、Inertia、Vue的SPA作品集网站，客户需要上传图片及相关数据功能。目前能成功上传部分图片，但有部分图片无法上传，需要排查原因。

后端代码 #

控制器 #

public function store(Request $request): Response
{
    PaintingService::createPaintingService($request);

    // 返回主画廊页面
    return self::returningToGallery();
}

服务类 #

public static function createPaintingService($request): void
{
    if ($request->hasFile('image')) {
        $fileName = time() . '.' . $request->image->extension();

        $request->image->move(public_path('storage'), $fileName);

        Painting::create([
            'title' => $request->title,
            'size' => $request->size,
            'medium' => $request->medium,
            'location' => $request->location,
            'frame_status' => $request->frame_status,
            'status' => $request->status,
            'notes' => $request->notes,
            'category' => $request->category,
            'image' => $fileName
        ]);
    }
}

前端Vue代码 #

模板部分 #

<template>
<backend-layout>
    <h2 class = "text-center text-4xl mb-10 tracking-wider">Create a New Painting</h2>
    <div class = "flex justify-center m-8">
        <form @submit.prevent="submit" enctype="multipart/form-data" method="post">
            <div class="flex flex-wrap -mx-3 mb-6">
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "project-title">
                        Painting Title
                    </label>
                    <input
                        id = "project-title"
                        v-model = "form.title"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Project Title" required
                        type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "project-category">
                        Painting Category
                    </label>
                    <input
                        id = "project-category"
                        v-model = "form.category"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Category" required
                        type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-size">
                        Painting Size
                    </label>
                    <input
                        id = "painting-size"
                        v-model = "form.size"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Painting Size" required
                        type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-medium">
                        Painting Medium
                    </label>
                    <input
                        id = "painting-medium"
                        v-model = "form.medium"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Painting Medium" required
                        type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-location">
                        Painting Location
                    </label>
                    <input
                        id = "painting-location"
                        v-model = "form.location"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Painting Location"
                        required type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-frame">
                        Painting Frame
                    </label>
                    <input
                        id = "painting-frame"
                        v-model = "form.frame_status"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Painting Frame"
                        required type = "text">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-status">
                        Painting Status
                    </label>
                    <select
                        id = "skill-percentage"
                        v-model = "form.status"
                        class = "appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        name = "skill_percentage" required>
                        <option value = "available">Available</option>
                        <option value = "unavailable">Not Available</option>
                    </select>
                </div>
                <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for="painting-image">
                        Painting Image
                    </label>
                    <input
                        id = "painting-image"
                        name = "image"
                        class = " appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        placeholder = "Painting Image"
                        type = "file" @change = "previewImage"
                        required
                        @input = "form.image = $event.target.files[0] || $event.dataTransfer.files">
                </div>
                <div class = "w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class = "block uppercase tracking-wide text-gray-700 text-xs font-light mb-1"
                           for = "painting-notes">
                        Notes
                    </label>
                    <textarea
                        id = "painting-notes"
                        v-model = "form.notes"
                        class = "appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white-500"
                        cols = "30" name = "notes" placeholder = "Painting Notes"
                        required rows = "10"></textarea>
                </div>
                <div class="w-full md:w-1/2 px-3 mt-5">
                    <img :src = "url" :alt = "url">
                </div>
            </div>
            <button class = "inline-block m-5" type = "submit">Submit</button>
            <Link href="/paintings/" class="inline-block m-5">Back</Link>
        </form>
    </div>
</backend-layout>
</template>

脚本部分 #

export default {
name: "create",
components: {
    "backend-layout": backendLayout,
    Link
},
setup() {
    const form = useForm({
        title: null,
        size: null,
        medium: null,
        location: null,
        frame_status: null,
        status: null,
        notes: null,
        category: null,
        image: null,
    });

    function submit(){
        form.post(route('paintings.store'),{
            forceFormData: true,
        });
       // Inertia.post(route('paintings.store'), form);
    }

    return { form, submit }
},
data(){
    return{
        url: null
    }
},
methods:{
    previewImage(e){
        const imageURL = e.target.files[0];
        this.url = URL.createObjectURL(imageURL);
    }
},

问题现象 #

• 成功上传的图片：通过dd($request)测试，文件对象包含完整的文件名、大小、临时路径等有效信息
• 无法上传的图片：dd($request)显示文件对象的isValid()为false，文件大小为0，临时路径为空

排查方向与解决方案 #

1. 检查文件大小限制 #

• 查看php.ini中的upload_max_filesize、post_max_size参数，确保值大于无法上传的图片大小
• 在Laravel中添加文件大小验证规则，比如限制最大2MB：

$request->validate([
    'image' => 'required|image|max:2048',
]);

2. 补充文件类型验证 #

当前代码未验证文件类型，部分图片可能是不支持的格式或损坏文件：

• 在服务类开头添加类型验证：

$request->validate([
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,webp',
]);

• 前端输入框添加accept属性限制可选格式：

<input type="file" accept="image/jpeg,image/png,image/gif,image/webp" ...>

3. 修复前端文件绑定逻辑 #

当前@input事件中，$event.dataTransfer.files是FileList对象，需取第一个元素：

@input = "form.image = $event.target.files[0] || ($event.dataTransfer.files ? $event.dataTransfer.files[0] : null)"

或者合并预览与文件绑定逻辑：

<input type="file" @change="handleFileChange" ...>

methods: {
    handleFileChange(e) {
        const file = e.target.files[0];
        this.form.image = file;
        this.url = URL.createObjectURL(file);
    }
}

4. 检查服务器权限 #

• 确保public/storage目录有写入权限：

chmod -R 755 public/storage
chown -R www-data:www-data public/storage # 根据服务器运行用户调整

• 检查服务器临时文件目录权限，确保Laravel可写入临时上传文件

5. 验证图片文件完整性 #

尝试重新保存无法上传的图片，或用图片编辑工具打开确认文件未损坏

内容的提问来源于stack exchange，提问作者Thomas Bockhorn