使用 RTK 查询和 React Native Expo 将带有 FormData 的文件发送到 Nodejs 服务器

Question

我想将文件发送到使用 expo-document-picker 或 expo-image-picker 选择的服务器。选择器的结果对象存储在providerDetails.id中，如下所示：

{"assets": [{"mimeType": "application/pdf", "name": "ID.pdf", "size": 273445, "uri": "file:///data/user/0/ host.exp.exponent/cache/DocumentPicker/4eff3862-4978-4b3a-8e1a-fb0af846fe83.pdf"}], "取消": false}

尝试过“fetch”等方法。他们不与世博会合作。以下代码给出了解析错误，很可能是 multer 造成的，因为它没有获取请求中的文件：

try {
    let formData = new FormData();
    formData.append("firstName", providerDetails.firstName);
    formData.append("lastName", providerDetails.lastName);
    formData.append("id", {
        uri: providerDetails.id.assets[0].uri,
        name: providerDetails.id.assets[0].fileName || providerDetails.id.assets[0].name,
        type: providerDetails.id.assets[0].mimeType,
    } as any );

    const data = await requestProviderAccount(formData).unwrap();
} catch (error) {
    console.error("Error submitting provider account request:", error);
}

提交提供商帐户请求时出错：{“data”：“ENOENT：没有此类文件或目录，请打开 'C:\Users\maizn\Documents\Projects\Helphive Project\Codebase\helphive-backend\[email protected]'” ，“错误”：“语法错误：JSON解析错误：意外字符：E”，“originalStatus”：500，“状态”：“PARSING_ERROR”}

Redux API 切片：

import { apiSlice } from "../../app/api/apiSlice";

export const providerApiSlice = apiSlice.injectEndpoints({
    overrideExisting: true,
    endpoints: (builder) => ({
        requestProviderAccount: builder.mutation({
            query: (formData) => {
                
                return {
                    url: "provider/request-provider-account",
                    method: "POST",
                    body: formData,
                };
            },
        }),
    }),
});

export const { useRequestProviderAccountMutation } = providerApiSlice;

我的服务器端端点：

import express from "express";
import multer from "multer";
import { handleRequestProviderAccount } from "../controllers/providerController";

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "./uploads");
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    },
});

const upload = multer({ storage: storage });

const providerRoute = express.Router();

providerRoute.post(
    "/request-provider-account", 
    upload.fields([
        { name: 'id', maxCount: 1 },
        { name: 'resume', maxCount: 1 },
        { name: 'dbs', maxCount: 1 },
        { name: 'profile', maxCount: 1 }
    ]),
    handleRequestProviderAccount
);

export default providerRoute;

Answer 1

这就是我所做的：

import { apiSlice } from "../../app/api/apiSlice";

export const providerApiSlice = apiSlice.injectEndpoints({
    overrideExisting: true,
    endpoints: (builder) => ({
        requestProviderAccount: builder.mutation<any, any>({
            query: (formData) => {
                return {
                    url: "provider/request-provider-account",
                    method: "POST",
                    formData: true, // set formData to true
                    body: formData,
                };
            },
        }),
    }),
});

export const { useRequestProviderAccountMutation } = providerApiSlice;

我以为Content-Type: multipart/form-data是自动设置的，但不知道还有一个新术语。