Dropzone Apollo-upload-client 使用 Upload！类型

Posted 2023-03-08

【中文标题】Dropzone Apollo-upload-client 使用 Upload！类型

【英文标题】：Dropzone Apollo-upload-client using Upload! Type

【发布时间】：2018-07-18 10:48:47

【问题描述】：

我正在使用apollo-upload-client (so graphQL) 并尝试使用 dropzone 将文件上传到我的服务器。

我已经使用 <input required onChange=( target: validity, files: [file] )=> this._uploadFiles(validity, file) 和函数成功地做到了这一点

_uploadFiles = async (validity, file) => 
        if (validity.valid)
            await this.props.addImageFileMutation(
                variables: file
            )
        
    

对于 Dropzone，我有：

<Dropzone
                      onDrop=this._onDrop.bind(this)
                      multiple=false>
                    </Dropzone>

使用函数：

_onDrop = async (acceptedFiles, rejectedFiles) => 
        const firstFile = acceptedFiles[0]
        await this.props.addImageFileMutation(
            variables:  firstFile 
        )
    

这是每个发送的文件，它们在我看来都一样！但它只适用于<input />！ 第一个值使用<Dropzone />，第二个值使用<input />。

你知道为什么我会收到 $file 与 Upload! 不匹配的问题吗？我在下面添加了更多代码以供参考。

const ADD_IMAGE_FILE_MUTATION = gql`
mutation AddImageFileMutation ($file: Upload!) 
    addImageFile(file: $file)
        id
`

【参考方案1】：

在_onDrop 中，您将一个名为firstFile 的变量传递给您的突变，但它正在寻找一个名为file 的变量：

variables:  firstFile 

试试这个：

variables:  file: firstFile 

【讨论】：

Daniel，我非常感谢，我不敢相信修复这么简单，谢谢！

我至少遇到过两次这个问题，我认为你的解决方案也是最先解决的，非常感谢！