Question

嗨，我在后端使用 Node 和 Apollo，在 React 前端使用 Apollo Upload Client 将文件上传到服务器。

一切正常，我没有收到任何警告或问题，但问题是，

上传到服务器上的文件，其大小始终为 0 字节。我不知道是什么导致了这个问题，所以我尝试了一个简单的文件上传示例（即使这行为相同）。

分享github中的简单上传示例。 React 内容在 Frontend 文件夹中，根文件夹是 nodejs 后端。 Github Link。

如果有些人不想要github，我也在这里分享简单的文件上传代码

NodeJS：

const { ApolloServer, gql } = require("apollo-server");
const fs = require("fs");
const path = require("path");

const typeDefs = gql`
    type File {
        url: String!
    }

    type Query {
        hello: String!
    }

    type Mutation {
        uploadFile(file: Upload!): File!
    }
`;

const resolvers = {
    Query: {
        hello: () => "Hello World",
    },
    Mutation: {
        uploadFile: async (parent, { file }) => {
            const { createReadStream, filename, mimetype, encoding } = await file;
            const stream = createReadStream();
            const pathName = path.join(__dirname, `/public/images/${filename}`);
            await stream.pipe(fs.createWriteStream(pathName));

            return {
                url: `http://localhost:4000/images/${filename}`,
            };
        },
    },
};

const server = new ApolloServer({
    typeDefs,
    resolvers,
});

server.listen().then(({ url }) => {
    console.log(`? Server ready at ${url}`);
});

反应文件上传

import React from "react";
import logo from "./logo.svg";

import { useMutation, gql } from "@apollo/client";

const UPLOAD_FILE = gql`
    mutation uploadFile($file: Upload!) {
        uploadFile(file: $file) {
            url
        }
    }
`;

const UploadForm = () => {
    const [uploadFile] = useMutation(UPLOAD_FILE, {
        onCompleted: (data) => console.log(data),
    });

    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (!file) return;
        uploadFile({ variables: { file } });
    };

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1>Upload File</h1>
                <input type="file" onChange={handleFileChange} />
            </header>
        </div>
    );
};

export default UploadForm;

设置 Apollo 上传客户端（app.js）

import "./App.css";

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
import UploadForm from "./UploadForm";

const client = new ApolloClient({
    link: createUploadLink({
        uri: "http://localhost:4000/",
    }),
    cache: new InMemoryCache(),
});

function App() {
    return (
        <ApolloProvider client={client}>
            <UploadForm />
        </ApolloProvider>
    );
}

export default App;

Apollo 文件上传和 React Apollo 上传客户端，零字节文件

0 个答案: