使用typegraphql上传文件(Apollo Server)

Question

我想要做的是

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

我的代码

我关注了这个tutorial

我已经把这个问题的一个很小的演示上传到了这个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))
    );
  }
}

我的问题

当我运行这个解析器(使用postman，如本教程所示)时，promise永远不会解析。createReadStream不会发出关闭、错误或完成事件。创建了图像文件，但它是空的(0字节)。

任何帮助都将不胜感激。

谢谢

Answer 1

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

在你的索引或服务器文件中，你需要有这个，在我的例子中，我使用的是whit，但是有一个使用apollo的设置

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在你文件夹中创建一个文件我认为最好是直接上传到你的存储服务器，但继续这样做，postman会有点难使用graphql你可以尝试使用Altair

您可以在此处看到Upload the file whit altair的选项

Graphql查询应如下所示

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