如何在NestJs中使用GraphQL上传图像

huangapple go评论62阅读模式
英文:

How to upload images in NestJs with GraphQL

问题

昨天我尝试使用这个名为graphql-upload的库,但问题是这个库graphql-upload存在许多导入问题,降级到以前的版本也无法解决这个问题。

我可以使用什么来在我的NestJs应用中实现图像上传?

英文:

Yesterday i was trying to use this library called graphql-upload but the problem is that the library graphql-upload has a lot of import issues, and downgrading to previous versions not solving this problem.

What can i use to implement image upload in my NestJs app?

答案1

得分: 1

以下是翻译好的内容:

阅读了一些之前的问题后,我得出结论要使用 graphql-upload@13.0.0,因为在更新版本中包的内容发生了变化。

以下是我的结论:

main.ts

// 忽略导入错误
// @ts-ignore
import { graphqlUploadExpress } from 'graphql-upload';

async function bootstrap() {
  // 设置应用使用 graphql-upload
  app.use(graphqlUploadExpress({maxFileSize: 1000000, maxFiles: 10 }));
  // 代码的其余部分
}

upload.resolver.ts

import { Args, Mutation, Resolver } from '@nestjs/graphql';
import { createWriteStream } from 'fs';
// 忽略导入错误
// @ts-ignore
import { GraphQLUpload, FileUpload } from 'graphql-upload';

@Resolver()
export class UploadResolver {
  @Mutation(() => Boolean)
  async singleUpload(
    @Args({ name: 'file', type: () => GraphQLUpload })
    { createReadStream, filename }: FileUpload,
  ) {
    console.log('你好,世界');

    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(`./uploads/${filename}`))
        .on('finish', () => resolve(true))
        .on('error', () => reject(false)),
    );
  }
}

在根目录中创建名为 'uploads' 的文件夹。

为了测试它,我使用 Insomnia。以下是我的查询设置:

operations: { "query": "mutation ($file: Upload!) { singleUpload(file: $file) }", "variables": { "file": null } }

map: { "0": ["variables.file"] }

0: // 你的文件

如何在NestJs中使用GraphQL上传图像

英文:

After reading some previous questions I came to the conclusion to use graphql-upload@13.0.0 due to the changes of package in newer versions.

Here is my conclusion:

main.ts

// Ignore the import error
// @ts-ignore
import { graphqlUploadExpress } from 'graphql-upload';


    async function bootstrap() {
      // Set app to use graphql-upload
      app.use(graphqlUploadExpress({maxFileSize: 1000000, maxFiles: 10 }));
      // Rest of the code
    }

upload.resolver.ts

import { Args, Mutation, Resolver } from '@nestjs/graphql';
import { createWriteStream } from 'fs';
// Ignore the import errors
// @ts-ignore
import { GraphQLUpload, FileUpload } from 'graphql-upload';

@Resolver()
export class UploadResolver {
  @Mutation(() => Boolean)
  async singleUpload(
    @Args({ name: 'file', type: () => GraphQLUpload })
    { createReadStream, filename }: FileUpload,
  ) {
    console.log('hello world');

    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(`./uploads/${filename}`))
        .on('finish', () => resolve(true))
        .on('error', () => reject(false)),
    );
  }
}

Create the 'uploads' folder in the root directory;

To test it I use Insomnia. Here is my query settings:

operations: { "query": "mutation ($file: Upload!) { singleUpload(file: $file) }", "variables": { "file": null } }

map: { "0": ["variables.file"] }

0: // Your file

如何在NestJs中使用GraphQL上传图像

huangapple
  • 本文由 发表于 2023年3月15日 19:37:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75744174.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定