首页 > 解决方案 > 使用 typegraphql (Apollo Server) 上传文件

问题描述

我想要做什么

我正在尝试使用typegraphql(Apollo Server 上的包装器)上传文件。我正在编写一个简单的解析器,它应该接收文件上传并将其写入服务器上的文件。

我的代码

我跟着这个教程

我已经将这个问题的一个非常小的演示上传到这个github repo。这是我接收上传文件的解析器

@Resolver()
export class ProfilePictureResolver {
  @Mutation(() => Boolean)
  async addProfilePicture(
    @Arg('picture', () => GraphQLUpload)
    upload: FileUpload
  ): Promise<boolean> {
    console.log('upload', upload);
    const { createReadStream, filename } = upload;
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
        .on('finish', () => resolve(true))
        .on('close', () => resolve(true))
        .on('error', () => reject(false))
    );
  }
}

我的问题

当我运行这个解析器(使用教程中所示的邮递员)时,承诺永远不会解决。createReadStream不会发出关闭、错误或完成事件。图像文件确实被创建,但它是空的(0 字节)。

任何帮助将不胜感激。

谢谢

标签: javascriptnode.jstypescriptapollo-servertypegraphql

解决方案


我用不同的方式做这个也许这可以帮助你我使用graphql-upload库上传图像

在你的索引或服务器文件中,你需要有这个,在我的情况下,我是用快递做的,但是有一个安装程序是阿波罗

import { graphqlUploadExpress } from 'graphql-upload'
import { graphqlHTTP }  from 'express-graphql';

    App.use('/graphql', graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }), graphqlHTTP(async(req, res) => 
    ({
        schema: await buildSchema
        ({
            resolvers: 
            [
                ProfilePictureResolver ,
            ],

        }),


    })));

和解析器

@Resolver()
export class ProfilePictureResolver 
{
  @Mutation(() => Boolean)
  async addProfilePicture(
  @Arg('picture', () => GraphQLUpload)upload: FileUpload): Promise<boolean> 
  {
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
        .on('finish', () => resolve(true))
        .on('close', () => resolve(true))
        .on('error', () => reject(false))
    );
  }
}

createReadStream 在您的文件夹中创建一个文件我认为最好直接上传到您的存储服务器但继续这样做,邮递员使用 whit graphql 有点困难,您可以尝试使用Altair

她您可以看到通过altair 上传文件的选项

您的 Graphql 查询应如下所示

mutation ($Picture: Upload!)
{
  
  addProfilePicture
  (
    upload: $Picture,
  )
}

推荐阅读