如何解决Apollo 文件上传和 React Apollo 上传客户端,零字节文件
嗨,我在后端使用 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。