无法使用 React 挂钩表单和 ajax 将文件从 React 上传到 laravel

Question

到目前为止，可以通过输入查看文件：

export async function store(input) {
    console.log("input", input);
    return httpClient.post(`${apiEndpoint}`, input);
}

上面console.log，显示数据为：

但是，在服务器端 laravel，如果我 print_r($request->all()) 它显示数据为：

我的 http 客户端是这样的：

import axios from "axios";

const apiURL = process.env.MIX_SPA_URL;

axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

axios.defaults.withCredentials = true;

let client = axios.create({
    baseURL: apiURL,
});

axios.interceptors.response.use(null, (error) => {
    const expectedError =
        error.response &&
        error.response.status >= 400 &&
        error.response.status < 500;

    if (!expectedError) {
        console.log("error from httpClient >>", error);
    }

    return Promise.reject(error);
});

function setJwt(token) {
    client.defaults.headers.common["Authorization"] = "Bearer " + token;
}

const httpClient = {
    get: client.get,
    post: client.post,
    put: client.put,
    delete: client.delete,
    setJwt,
};

export default httpClient;

此外，如果您想查看我是如何使用 react-hook-form 创建输入文件的：

<input
    className={`form-control w-full ${
        errors["cover_image"] ? "border-red-500" : ""
    }`}
    type="file"
    {...register("cover_image")}
/>

为什么图片没有发送到服务器？

在 laravel 的情况下，我将 laravel sanctum 与 fortify 结合使用。并且，为此路由添加的中间件是 auth:sanctum 和 verified.

此外，我尝试将 headers 添加为： "Content-Type": "multipart/form-data",

export async function store(input) {
    console.log("input", input);
    return httpClient.post(`${apiEndpoint}`, input, {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
}

但是，对于这个 header，没有一个数据被发送到服务器。这是屏幕截图：

Answer 1

我认为您必须将文件放入 formData，然后将其作为 post 请求数据传递

export async function store(input) {
    const formData = new FormData();
    formData.append("cover_image", input.cover_image[0]);
    formData.append("blockchain", input.blockchain);
    formData.append("description", input.description);
    formData.append("name", input.name);

    return await httpClient.post(`${apiEndpoint}`, formData, {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
}

无法使用 React 挂钩表单和 ajax 将文件从 React 上传到 laravel

Unable to upload file from react to laravel using react hook form and ajax

laravel

reactjs

axios

react-hook-form