首页 > 解决方案 > 文件上传并通过 POST 请求向 API 发送信息

问题描述

所以我有一个需要单个文件的突变。它需要读取文件并将带有数据的 POST 请求发送到 API。目前,我以某种方式无法正确读取流并通过 POST 请求将信息发送到我的 api,而没有任何文件信息。

我不太确定如何正确读取文件。Apollo 服务器也只做 json 而不是多格式数据。如果我使用 axios,它就会混淆我拥有的数据类型的类型。

我在这里想念什么?

阿波罗文档

架构:

input UploadDocumentType {
  file: Upload!
}
type Task {
  filename: String!
  mimetype: String!
  encoding: String!
  id: ID!
}

type UploadDocumentPayload {
  file: Task
}
type Mutation {
 uploadDocument(input: UploadDocumentType!): UploadDocumentPayload
}

我在下面返回了基本数据。但我想从响应中获取 ID。

解析器:

const Mutation: MutationResolvers = {
  async uploadDocument(_, args: MutationUploadDocumentArgs, ctx: Context) {
    const { createReadStream, filename, mimetype, encoding } = await args.input.file
    const res = ctx.dataSources.taskService.postTask(createReadStream);

    return { 
      file: {filename, mimetype, encoding, id} 
    }
  }
}

我有两个版本的任务。一个使用 Axios,另一个使用 Apollo-server 的 RESTDataSource

async postTask(file: Scalars["Upload"]) {
    const url = process.env.BASE_TASK_URL
    return this.post(`${url}/task/`, {
      "task_type": "brief-analysis",
      "binary_payload": file
    })
  }


  async postTask(file: Scalars["Upload"]) {
    const url = process.env.BASE_TASK_URL
    const formData = new FormData()
    formData.append("file", file)

    const config = {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
        // "Content-Type": "multipart/form-data"
      },
      data: formData
    };
    return axios.post(`${url}/task/`, formData, config).then(res => res.data).catch(e => console.log("in post req", e))
  }

标签: node.jstypescriptgraphqlapollo-server

解决方案


以二进制值发送文件

var file = files.item(0);
var binaryFile = '';
const reader = new FileReader();
reader.onload = e => {
  binaryFile = reader.result
};
reader.readAsDataURL(this.invoice.file);

推荐阅读