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

问题描述

我有一个使用 express 实现的 GraphQL 后端，express-graphql, graphql 和 graphql-upload.我的 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 请求="nofollow noreferrer">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屋！