如何使用axios将文件上传到使用graphql-upload实现的graphql后端? [英] How do I upload files to a graphql backend implemented using graphql-upload using axios?

问题描述

我有一个使用 express ， graphql-up .我的GraphQL模式声明如下:

I have a GraphQL backend implemented using express, express-graphql, graphql and graphql-upload. My GraphQL schema declaration is as follows:

type OProject {
    _id: ID!
    title: String!
    theme: String!
    budget: Float!
    documentation: String!
    date: Date
}

input IProject {
    title: String!
    theme: String!
    budget: Float!
    file: Upload!
}

type Mutations {
    create(data: IProject): OProject
}

type Mutation {
    Project: Mutations
}

我想使用/graphql 处的GraphQL API发出create请求> axios .我该怎么办?

I want to make a create request to my GraphQL API at /graphql using axios. How go I go about it?

推荐答案

遵循GraphQL多部分请求规范

Following the GraphQL multipart request specification detailed here you would go about doing so by:

• 创建一个 FormData 实例并将其填充具有以下内容:
  • operations字段，
  • map字段和
  • 要上传的文件
  • creating a FormData instance and populating it with the following:
    • The operations field,
    • the map field and,
    • the files to upload

    创建FormData实例

    var formData = new FormData();
    

    operations字段:

    The operations field:

    此字段的值将是一个包含GraphQL query和variables的JSON字符串.您必须将variables对象中的所有文件字段设置为null，例如:

    The value of this field will be a JSON string containing the GraphQL query and variables. You must set all file field in the variables object to null e.g:

    const query = `
        mutation($project: IProject!) {
            Project { create(data: $project) { _id } }
        }
    `;
    
    const project = {
        title: document.getElementById("project-title").value,
        theme: document.getElementById("project-theme").value,
        budget: Number(document.getElementById("project-budget").value),
        file: null
    };
    
    const operations = JSON.stringify({ query, variables: { project } });
    formData.append("operations", operations);
    

    map字段:

    The map field:

    顾名思义，此字段的值将是对象的JSON字符串，其键是包含文件的FormData实例中的字段名称.每个字段的值将是一个包含字符串的数组，该字符串指示文件与variables对象中的哪个字段对应，该键对应于值的键，例如:

    As its name implies, the value of this field will be a JSON string of an object whose keys are the names of the field in the FormData instance containing the files. The value of each field will be an array containing a string indicating to which field in the variables object the file, corresponding to value's key, will be bound to e.g:

    const map = {
        "0": ["variables.project.file"]
    };
    formData.append("map", JSON.stringify(map));
    

    要上传的文件 然后，您应该按照map将文件添加到FormData实例.在这种情况下；

    The files to upload You then should add the files to the FormData instance as per the map. In this case;

    const file = document.getElementById("file").files[0];
    formData.append("0", file);
    

    就是这样.现在，您可以使用axios和FormData实例向后端提出请求了:

    And that is it. You are now ready to make the request to your backend using axios and the FormData instance:

    axios({
        url: "/graphql",
        method: "post",
        data: formData
    })
        .then(response => { ... })
        .catch(error => { ... });
    

    这篇关于如何使用axios将文件上传到使用graphql-upload实现的graphql后端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！