Question

我尝试将图像上传到使用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"

感谢您的帮助。

Answer 1

假设您正在使用graphql-upload（以前是apollo-upload-server）或apollo-server（在后台使用graphql-upload），则应该使用client that supports the GraphQL Multipart specification。

如果您使用的是Vue，则最简单的方法是设置Apollo utilizing the appropriate Link。

用法示例：

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()
})

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

如何将上载文件类型转换为graphql UploadFile类型？

我的表格

我的上传功能

显示的错误：

1 个答案: