Apollo-express-server 仅通过第一个上传（文件），其余的都丢失了

Question

我正在使用带有 GraphQL 的 apollo-express 服务器。我有一个突变，我将文件从前端传递到后端，但我收到文件：{} 对象仅为第一个 - 对于另一个我收到承诺。

这是我的突变声明：

 extend type Mutation {
    createCase(input: CreateCase!, attachments: [Upload]): Case
  }

我简化了我的实现只是为了 console.log 附件：

Mutation: {
    createCase: async (
      parentValue: any,
      { input, attachments }: { input: CaseInterface; attachments: [File] },
      context: any
    ) => {
     
      console.log(attachments)
    }
}

我像这样从前端传递文件：

const SEND_CASE = gql`
  mutation CreateCase($input: CreateCase!, $attachments: [Upload]) {
    createCase(input: $input, attachments: $attachments) {
      _id
    }
  }
`;

和功能用法：

 createCase({
      variables: {
        input: {
          description: props.creationData.description,
          date: new Date().toDateString(),
          priority: props.creationData.priority,
          userId: props.creationData.userId,
          categoryId: props.categories.map((el: any) => el._id),
          signature: "",
          type: props.casetype === "problem" ? 1 : 2,
        },
        attachments: props.creationData.attachments,
      },
    });

prop.creationData.attachments 看起来很正常：

问题是在我的后端我的 console.log(attachments) 看起来像这样：

[
  Upload {
    resolve: [Function (anonymous)],
    reject: [Function (anonymous)],
    promise: Promise { [Object] },
    file: {
      filename: 'wa.jpg',
      mimetype: 'image/jpeg',
      encoding: '7bit',
      createReadStream: [Function: createReadStream]
    }
  },
  Upload {
    resolve: [Function (anonymous)],
    reject: [Function (anonymous)],
    promise: Promise { <pending> }
  }
]

第二个 Upload 对象中的文件丢失，并且那里的 Promise 处于待处理状态。我无法解释自己为什么会这样。如果需要，我还有 console.log req.body 和 req.header：

{
  host: '192.168.1.152:3001',
  connection: 'keep-alive',
  'content-length': '51479',
  accept: '*/*',
  'apollo-require-preflight': 'true',
  authorization: '',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
  'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryA2VfmoLeZm9NTXsk',
  origin: 'http://localhost:3000',
  referer: 'http://localhost:3000/',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'en-GB,en-US;q=0.9,en;q=0.8,bg;q=0.7'
}
{
  operationName: 'CreateCase',
  variables: {
    input: {
      description: 'test',
      date: 'Thu Jan 19 2023',
      priority: 1,
      userId: '630899dc48a9a14833398a7e',
      categoryId: [Array],
      signature: '',
      type: 1
    },
    attachments: [ [Upload], [Upload] ]
  },
  query: 'mutation CreateCase($input: CreateCase!, $attachments: [Upload]) {\n' +
    '  createCase(input: $input, attachments: $attachments) {\n' +
    '    _id\n' +
    '    __typename\n' +
    '  }\n' +
    '}'
}

我怎样才能让后端的所有文件都像收到的第一个文件一样？

Answer 1

两个文件都“在那里”，但到目前为止只有一个文件上传完成。不过，它们都是 promise，因此处理它们是一样的。你只需要等待承诺解决，你应该没问题。

根据graphql-upload examples repo，假设你有一个方法

storeUpload

像这个一次处理一个文件，你可以这样做：

const resolvers = {
  Mutation: {
    createCase: async (
      parentValue: any,
      { input, attachments }: { input: CaseInterface; attachments: [File] },
      context: any
    ) => {
      const attachmentFilenames = [];

      // Ensure an error storing one upload doesn’t prevent storing the rest.
      for (const result of await Promise.allSettled(attachments.map(storeUpload))) {
        if ("value" in result) {
          attachmentFilenames.push(result.value);
        } else {
          // Realistically you would do more than just log an error.
          console.error(`Failed to store upload: ${result.reason}`);
        }
      }
      console.log(attachmentFilenames)
    }
  },
};

Answer 2

我是这样做的：

attachments.map(async(upload:any)=>{
        console.log(await Promise.resolve(upload.promise))
        console.log('NEXT.............')
      })

给定的输出是：

{
  filename: '1.jpg',
  mimetype: 'image/jpeg',
  encoding: '7bit',
  createReadStream: [Function: createReadStream]
}
NEXT.............
{
  filename: '2.jpg',
  mimetype: 'image/jpeg',
  encoding: '7bit',
  createReadStream: [Function: createReadStream]
}
NEXT.............
{
  filename: '3.jpg',
  mimetype: 'image/jpeg',
  encoding: '7bit',
  createReadStream: [Function: createReadStream]
}
NEXT.............

所以基本上这解决了问题 - 像承诺一样处理文件并等待它们被解决。