如何在NodeJS中使用Graphql Apollo和SharpJS处理上传的图片？

Question

我有一个GraphQL mutation从前端获取一张图片，然后在我的服务器上对其进行处理和优化。

但我无法弄清楚如何将我的图片传递给Sharp。

以下是我的代码:

const Mutation = {
    createImage: async (_, { data }) => {
        const { file } = data
        const image = await file

        console.log(image)

        const sharpImage = sharp(image)
    }
}

我知道代码无法工作，sharp 抛出一个错误，表示输入无效。那么我该如何使用 createReadStream 来创建 sharp 的实例呢？

当我运行 console.log(image) 时，看到的是：

image {
  filename: 'image.png',
  mimetype: 'image/png',
  encoding: '7bit',
  createReadStream: [Function: createReadStream]
}

非常感谢您提前的帮助！

- Anatol

---

流 != 缓冲区 ? - xadm

@xadm 感谢您的建议。我知道流不是缓冲区。我只是想提供一些示例来进行操作。我正在尝试理解如何使用 createReadStream 并使用 sharp 处理图像。 - Anatol

检查参数...文件已准备就绪（当然，如果正确传递）...控制台记录图像或文件...https://dev59.com/OaHia4cB1Zd3GeqPTW0-#61452904 - xadm

@xadm 当我将等待的文件结果传递给sharp时，仍然会出现“[Error: Input file is missing]”错误。我已经在我的问题中添加了等待文件的console.log结果。 - Anatol

似乎你可以使用流（stream）... https://dev59.com/Kbroa4cB1Zd3GeqPuvYX#61786860 - xadm

@xadm 谢谢你的帮助！我进行了很多研究，最终找到了所有使我的 GraphQL 解析器正常工作的部分。我在下方发布了我的答案。再次感谢！ - Anatol

Answer 1

所以我找到了解决我的问题的方法。

首先，我发现需要在 typeDefs 中添加 scalar Upload。

然后，我需要像这样为 Upload 添加一个解析器：

const { GraphQLUpload } = require('graphql-upload');

const server = new ApolloServer({
  resolvers: {
    Upload: GraphQLUpload,
  }
})

然后在我的解析器中，我需要做以下操作：

// this is a utility function to promisify the stream and store the image in a buffer, which then is passed to sharp
const streamToString = (stream) => {
    const chunks = [];
    return new Promise((resolve, reject) => {
        stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
        stream.on('error', (err) => reject(err));
        stream.on('end', () => resolve(Buffer.concat(chunks)));
    })
}

const Mutation = {
    createImage: async (_, { data }) => {
        const { file } = data
        const { createReadStream } = await file

        const image = await streamToString(createReadStream())

        const sharpImage = sharp(image)
    }
}

- Anatol

Answer 2

Apollo建议使用签名URL而不是通过mutations上传文件。https://www.apollographql.com/blog/backend/file-uploads/file-upload-best-practices/ 这是由于CSRF风险和性能影响，尤其是在应用程序扩展时。对于正确处理CSRF风险的应用程序，通过mutation上传文件应该是可以的。

- andersan