Question

在开发应用程序时，我都使用Apollo将Vue js用作前端框架，将Nodejs用作后端。我希望能够将文件从Vue应用程序上传到我的Nodejs应用程序，但是当我尝试使用它时，在“网络”标签中出现了此错误

{“错误”：[{”消息”：“无法解构'undefined'或'null'的属性stream。“，”位置“：[{” line“：2，” column“： 3}]，“ path”：[“ createCourses”]，“ extensions”：{“ code”：“ INTERNAL_SERVER_ERROR”，“ exception”：{“ stacktrace”：[“ TypeError：Can can destruct property stream of' d.Mutation.createCourses.combineResolvers（C：\ Users \ De Stone Of David \ Desktop \ node projects \ vue \ cybersec \ server \ src \ resolvers \ course.js：17：38）“，”在process.internalTickCallback（internal / process / next_tick.js：77：7）“]}}}]，”数据“：null}

这是我的Vuejs代码

    <template>
        <div id="courses__page">
            <form class="signup__form" v-on:submit.prevent="AddCourse" enctype="multipart/form-data">
                <div class="form-group col-md-6" >
                    <label >Course Picture:</label>
                    <input type="file" ref="file" @change="selectFile" class="file-input" />
                </div>
                <div v-if="selectedFile" class="form-group col-md-6" >
                    <img :src="file.name" alt="">
                </div>
                <button type="submit" class="btn btn-accent"> Add Courses </button>
            </form>
        </div>
    </template>

    <script>  
       const CREATE_COURSE = gql `
        mutation CREATECOURSE_MUTATION($Picture: Upload!) {
          createCourses(Picture: $Picture) {
            id
          }
        }
      `
        export default {
            name:'helloworld',
            data: () => ({
                categories: {},
                editor: ClassicEditor,
                editorData:'',
                file:'',
                selectedFile:false
            }),
            methods: {
                AddCourse(){
                    const formData = new FormData()
const Picture = this.file
                    this.$apollo.mutate({
                        mutation: CREATE_COURSE,
                        variables: {
                            Picture
                        },
                    }).then((result) => { 
                        this.success=true;
                    }).catch((error) => {
                        this.success=false;
                        console.log(error)
                        this.theErorMsg = JSON.parse(JSON.stringify(error.graphQLErrors[0].message)).replace(/['"]+/g, '').replace(/[\[\]']+/g,'').split("child");
                    }) 
                },
                selectFile(){
                    this.file = this.$refs.file.files[0]
                    this.selectedFile=true
                    console.log(this.file)
                }
            }
        }
    </script>

在我的Nodejs中，这是我的架构代码

import { gql } from 'apollo-server-express';

export default gql`
    extend type Mutation {
        createCourses(Picture: Upload!): fileMetadata!
    }  
    type fileMetadata {
        originalname : String
        mimetype : String
        encoding : String
        destination : String
        filename : String
        path : String
        size : Int
    }
;

和我的解析器代码

import { combineResolvers } from 'graphql-resolvers';
import Sequelize from 'sequelize';
import { 
  isAuthenticated,
} from './authorization';

export default {

  Mutation: {
    createCourses: combineResolvers(
      isAuthenticated,
      async (parent, args, { models, me }) => {
        console.log('args')
      }, 
    ),
  }
};

以及如何使用Apollo在Nodejs应用程序中处理文件上传，这里是我的server.js代码

import cors from 'cors';
import express from 'express';
import http from 'http';
import uuidv4 from 'uuid/v4';
import { ApolloServer, gql, AuthenticationError } from 'apollo-server-express';
import DataLoader from 'dataloader';
import models, { sequelize } from './models';
import resolvers from './resolvers'; 
import schema from './schema';
import loaders from './loaders';
const dotenv = require('dotenv');
import {verifyJWT} from './functions/jwt'

dotenv.config(); 

const app = express();
app.use(cors());
const eraseDatabaseOnSync = true; 

// authentication on a server level.
const getMe = async req => {
  const token = req.headers['authorization'];
  if (token) {
    // console.log(verifyJWT(token))
    return await verifyJWT(token)
  }
};

const server = new ApolloServer({
  introspection: true, 
  typeDefs: schema,
  resolvers,
  formatError: error => {
    const message = error.message
      .replace('SequelizeValidationError: ', '')
      .replace('Validation error: ', '');

    return {
      ...error,
      message, 
    };
  },
  context: async({ req, connection }) => {
    if (connection) {
      return {
        models,
        loaders: {
          user: new DataLoader(keys =>
            loaders.user.batchUsers(keys, models),
          ), 
        },
      };
    }
    if (req) {
      const me = await getMe(req);
      return {
        models,
        me,
        secret: process.env.SECRET,
        loaders: {
          user: new DataLoader(keys => loaders.user.batchUsers(keys, models)),
        },
      };
    }
  }
});

server.applyMiddleware({ app, path: '/graphql' });

// what we wrapped our app in to set up the Apollo Server Subscription.
const httpServer = http.createServer(app); 
server.installSubscriptionHandlers(httpServer);

const isProduction = !!process.env.DATABASE_URL;
const port = process.env.PORT || 8000;

sequelize.sync({ force: isProduction }).then(async () => {
  if (isProduction) {
    createUsersWithMessages(new Date());
  }
  httpServer.listen({ port }, () => {
    console.log(`Apollo Server on http://localhost:${port}/graphql`);
  });
});

我在网上搜索过，但没有找到任何可以帮助我的信息。如何删除错误消息并处理文件上传？

我的文件上传不适用于apollo服务器和vuejs

0 个答案: