时间戳

首页 > 解决方案 > 如何将上传文件类型转换为 graphql UploadFile 类型？

vue.js - 如何将上传文件类型转换为 graphql UploadFile 类型？

问题描述

我尝试在使用 vue.js 构建的客户端将图像上传到服务器，但我一直都有错误。我尝试使用 formData 发送请求，尝试直接使用文件列表对象，使用文件对象。

但似乎没有什么是好的。

我的表格

<form enctype="multipart/form-data">
  <input
    @change="uploadPhoto($event)"
    accept="image/*"
    ref="file"
    type="file"
    name="files"
    id="files"
    class="inputfile inputfile-upload"
    capture="user"
  >
</form>

我的上传功能

uploadPhoto({ target }) {
  const formData = new FormData()
  formData.append('files', target.files)

  HTTP.post('/graphql', {
    query: `
      mutation UploadFile($file: Upload!) {
        upload(file: $file) {
          id
          hash
          url
        }
      }
    `,
    variables: {
      file: formData,
    },
  })
},

显示错误：

{"errors":[{"message":"The \"path\" argument must be one of type string, Buffer, or URL. Received type undefined"

谢谢你的帮助。

标签： vue.jsfile-uploadgraphqlgraphql-js

解决方案

假设您正在使用graphql-upload（以前apollo-upload-server）或apollo-server（在后台graphql-upload使用），您应该使用支持 GraphQL Multipart 规范的客户端。

如果您使用的是 Vue，使用适当的 Link设置 Apollo 是最简单的。

示例用法：

const { ApolloClient } = require('apollo-client')
const { InMemoryCache } = require('apollo-cache-inmemory')
const { createUploadLink } = require('apollo-upload-client')

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: createUploadLink()
})

有关其他详细信息，请参阅文档。

推荐阅读