InertiaJS 文件上传不适用于 PUT 方法

Question

我有一个表格可以用必要的数据（名称、描述等）更新产品，它包括

file

类型的输入，更改时它将调用函数

handleImage

，然后该函数会将上传的文件存储在

form.image 中

：

<script setup>
import { useForm } from "@inertiajs/vue3";
const props = defineProps({ product: Object, categories: Object });

const form = useForm("UpdateProduct", {
    name: props.product.name,
    description: props.product.description,
    bestSelling: props.product.bestSelling,
    image: null,
});

const updateProduct = () => {
    console.log(form); // {name:"product 1", ..., File: {name: 'example.png', lastModified: 1704637318465, ....}}
    form.put(route("products.update", props.product.id), {
        preserveScroll: true,
        },
    });
};

const handleImage = (e) => {
    form.image = e.target.files[0];
    console.log(form.image); // File {name: 'example.png', lastModified: 1704637318465, ....}

};
</script>

<template>
    <form @submit.prevent="updateProduct">
        <div class="field">
            <label for="name">
                {{ $t("createProduct.name") }}
            </label>
            <input
                type="text"
                id="name"
                v-model.trim="form.name"
            />
            <div v-show="form.errors.name">
                <p class="text-danger text-center">
                    {{ form.errors.name }}
                </p>
            </div>
        </div>

        <div class="field">
            <label for="description">
                {{ $t("createProduct.description") }}
            </label>

            <textarea
                id="description"
                v-model.trim="form.description"
                required
                rows="5"
            >
            </textarea>
            <div v-show="form.errors.description">
                <p>
                    {{ form.errors.description }}
                </p>
            </div>
        </div>


        <div class="field">
            <label for="bestSelling">{{
                $t("createProduct.bestSelling")
            }}</label>
            <select
                id="bestSelling"
                required
                @click="selectOptions"
            >
                <option :selected="form.bestSelling === 1">Yes</option>
                <option :selected="form.bestSelling === 0">No</option>
            </select>
            <div v-show="form.errors.bestSelling">
                <p>
                    {{ form.errors.bestSelling }}
                </p>
            </div>
        </div>

        <div class="field">
            <input
                type="file"
                @input="handleImage"
                accept="image/png, image/gif, image/jpeg, image/bmp"
            />
            <progress
                v-if="form.progress"
                :value="form.progress.percentage"
                max="100"
            >
                {{ form.progress.percentage }}%
            </progress>
            <div v-show="form.errors.image">
                <p class="text-danger text-center">
                    {{ form.errors.image }}
                </p>
            </div>
        </div>

        <button
            class="btn btn-danger mx-2 w-25"
            @click="closeModal"
        >
            {{ $t("createProduct.cancel") }}
        </button>

        <button
            :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing"
            type="submit"
            class="btn btn-secondary text-white w-25"
        >
            {{ $t("products.update") }}
        </button>
    </form>
</template>

    public function update(Request $request, Product $product)
    {
      dd($request->all());       
    }

在控制器方法

update

中，如果我发送请求负载而没有上传图像，它将收到请求：

array:8 [▼ // app\Http\Controllers\ProductController.php:96
  "name" => "product 1"
  "description" => "product description"
  "bestSelling" => false
  "category" => "Extra care"
  "image" => null
]

但是如果我上传图像，

dd($request->all());

的结果将是一个空数组，这意味着没有收到请求负载：

[] // app\Http\Controllers\ProductController.php:96

Answer 1

惯性JS

多部分限制：

Uploading files using a multipart/form-data request is not natively supported in some server-side frameworks when using the PUT,PATCH, or DELETE HTTP methods. The simplest workaround for this limitation is to simply upload files using a POST request instead.

source

：

https://inertiajs.com/file-uploads