Question

所以我一直在处理GraphQL上传，在说明问题之前，这里是我正在使用的技术堆栈的概述：

后端：猫鼬，Express，Apollo，GraphQL

前端：VueJS，Apollo，GraphQL

我正在使用Apollo Upload Client将 Upload 文件从客户端发送到服务器端。由于我正在从客户端发送 scalar Upload 类型的文件列表，因此我收到了需要解决的承诺列表。在使用 Promise.all（）时，出现以下错误（奇怪的是，我以前没有得到，我也不知道为什么）。如果我上传多个文件，则第一个文件会丢失，而第二个文件将上载...。但是，这并非一直如此。有时它不会发生。也许我没有正确解决或满足诺言。请注意，我还必须通过Mongoose将文件名保存在MongoDB中

    { BadRequestError: Request disconnected during file upload stream parsing.
     at IncomingMessage.request.once (F:\repos\pushbox\node_modules\graphql-upload\lib\processRequest.js:245:35)
     at Object.onceWrapper (events.js:285:13)
     at IncomingMessage.emit (events.js:197:13)
     at resOnFinish (_http_server.js:583:7)
     at ServerResponse.emit (events.js:202:15)
     at onFinish (_http_outgoing.js:683:10)
     at processTicksAndRejections (internal/process/next_tick.js:74:9)
   message: 'Request disconnected during file upload stream parsing.',
   expose: true,
   statusCode: 499,
   status: 499 }

我有一个包含多个文件的HTML文件输入标签，而我使用的变异是：

async uploadFiles() {
  // Check if input tag is empty
  if (this.files.length === 0) {
    this.uploadErrorAlert = true;
    return;
  }

  // Mutation
  this.isUploading = true;
  await this.$apollo.mutate({
    mutation: UPLOAD_FILES,
    variables: {
      files: this.files,
      id: this.selectedCard.id,
    },
  })
    .then(() => {
    // clear files from the input tag
      this.files = '';
      this.$refs.selectedFiles.value = '';
      this.isUploading = false;
    })
    .catch((err) => {
      console.error(err);
    });
},

最后，服务器上的解析器为：

/**
 * Uploads files sent on disk and saves
 * the file names in the DB
 *
 * @param {Object} attachments - List of files for a card
 *
 * @return {Boolean} - true if upload is
 * successful
 */
uploadFiles: async (_, attachments, { controllers }) => {
  Promise.all(attachments.files.map(async (file) => {
    const { createReadStream, filename } = await file;
    const stream = createReadStream();

    /**
     * We need unique names for every file being uploaded,
     * so we use the ID generated by MongoDB and concat it
     * to the filename sent by the user.
     *
     * Therefore we instantiate an attachment object to get an ID
     */
    const attachment = await controllers.attachment.add({ id: attachments.id, file: '' });
    const newFileName = `${attachment.id}_${filename}`;
    const path = `${process.env.UPLOAD_DIR}/${newFileName}`;

    await controllers.attachment.update({
      id: attachment.id,
      file: newFileName,
    });

    console.log(`reached for ${path}`);
    // Attempting to save file in server
    return new Promise((resolve, reject) => stream
      .pipe(createWriteStream(path))
      .on('finish', () => resolve())
      .on('error', (error) => {
        console.log('dude?');
        if (stream.truncated) {
          // Delete the truncated file
          unlinkSync(path);
        }
        reject(error);
      }));
  })).then(() => {
    pubsub.publish(ATTACHMENTS_ADDED, { attachmentsChanged: controllers.attachment.getAll() });
  }).catch((err) => {
    console.log(err);
  });
},

任何帮助将不胜感激！

Answer 1

好吧，所以我不知道我怎么想念this issue，但是正确的解决方案是对的！问题出在我正在使用的模块的github问题论坛上。

因此，可以通过在await函数之前使用Promise.all()解决问题。因此，uploadFiles解析器中的代码如下：

await Promise.all(attachments.files.map(async (file) => {
    const { createReadStream, filename } = await file;
    const stream = createReadStream();

    /**
     * We need unique names for every file being uploaded,
     * so we use the ID generated by MongoDB and concat it
     * to the filename sent by the user.
     *
     * Therefore we instantiate an attachment object to get an ID
     */
    const attachment = await controllers.attachment.add({ id: attachments.id, file: '' });
    const newFileName = `${attachment.id}_${filename}`;
    const path = `${process.env.UPLOAD_DIR}/${newFileName}`;

    await controllers.attachment.update({
      id: attachment.id,
      file: newFileName,
    });

    console.log(`reached for ${path}`);
    // Attempting to save file in server
    return new Promise((resolve, reject) => stream
      .pipe(createWriteStream(path))
      .on('finish', () => resolve())
      .on('error', (error) => {
        console.log('dude?');
        if (stream.truncated) {
          // Delete the truncated file
          unlinkSync(path);
        }
        reject(error);
      }));
  })).then(() => {
    pubsub.publish(ATTACHMENTS_ADDED, { attachmentsChanged: controllers.attachment.getAll() });
  }).catch((err) => {
    console.log(err);
  });

GraphQL：在文件上载期间解决承诺时出错

1 个答案: