Nuxt + GraphQL (阿波罗)上传文件

基础概念

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它简化了服务器端渲染（SSR）和其他高级功能（如静态站点生成）的实现。

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、灵活的数据查询方式，相比于传统的 RESTful API，GraphQL 允许客户端精确地获取所需的数据。

Apollo Client 是一个强大的 GraphQL 客户端，它提供了与 GraphQL API 交互的功能，并且可以与 Nuxt.js 等前端框架无缝集成。

上传文件的优势

灵活性：GraphQL 允许客户端发送复杂的数据结构，包括文件。
效率：通过一次请求，客户端可以获取或上传所有需要的数据。
减少请求次数：相比于多次 HTTP 请求，GraphQL 可以在一次请求中完成多个操作。

类型

在 GraphQL 中，上传文件通常使用 Upload 类型。这是一个特殊的标量类型，用于处理文件上传。

应用场景

用户头像上传：用户可以在个人资料页面上传头像。
图片或视频分享：用户可以在社交平台上上传图片或视频。
文件管理：用户可以上传、下载和管理各种文件。

上传文件的实现

后端（GraphQL 服务器）

首先，需要在 GraphQL 服务器上定义一个 mutation 来处理文件上传。以下是一个简单的示例：

const { ApolloServer, gql } = require('apollo-server');
const { GraphQLUpload } = require('graphql-upload');
const fs = require('fs');
const path = require('path');

const typeDefs = gql`
  scalar Upload

  type Mutation {
    uploadFile(file: Upload!): String
  }
`;

const resolvers = {
  Upload: GraphQLUpload,
  Mutation: {
    uploadFile: async (_, { file }) => {
      const { createReadStream, filename, mimetype } = await file;
      const stream = createReadStream();
      const pathName = path.join(__dirname, 'uploads', filename);
      const writeStream = fs.createWriteStream(pathName);
      stream.pipe(writeStream);
      return pathName;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

前端（Nuxt.js + Apollo Client）

在前端，可以使用 apollo-upload-client 库来处理文件上传。以下是一个简单的示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
  </div>
</template>

<script>
import { useMutation } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { createUploadLink } from 'apollo-upload-client';

const uploadLink = createUploadLink({
  uri: 'http://localhost:4000/graphql',
});

const apolloClient = new ApolloClient({
  link: uploadLink,
  cache: new InMemoryCache(),
});

const UPLOAD_FILE = gql`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file)
  }
`;

export default {
  setup() {
    const { mutate } = useMutation(UPLOAD_FILE, { client: apolloClient });

    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        mutate({ file })
          .then((response) => {
            console.log('File uploaded successfully:', response.value);
          })
          .catch((error) => {
            console.error('Error uploading file:', error);
          });
      }
    };

    return {
      handleFileChange,
    };
  },
};
</script>