3

我正在使用 Vue-Dropzone 通过 graphql 上传文件。一切正常，但由于我使用的是 graphql，因此我不需要将 URL 放在“dropzoneOptions”中，因为我将查询放在 Vuex 模块内的 Axios API 中，如下所示：

async vFileAdded(bomFile){
  const formData = new FormData()
  const data = {
    query: `
        mutation (
          $file: Upload,
          $projectId: ID!,
          $region: String!,
          $isTest: Boolean,
        ) {
        uploadBom(
          input: {
            bom: $file,
            projectId: $projectId,
            region: $region,
            isTest: $isTest,
          }) {
              project {
                  id
                  name
                }
            }
        }
      `,
    variables: {
      file: null,
      projectId: "UHJvamVjdE5vZGU6MTU=",
      region: "Lombardia",
      isTest: true
    }
  }
  formData.append('operations', JSON.stringify(data))
  const map = {
    '0': ['variables.file'],
  }
  formData.append('map', JSON.stringify(map));
  formData.append('0', bomFile)
  
  try {
    axios.defaults.headers.common["Authorization"] =
      "JWT " + localStorage.getItem("edilgo-token")
    const result = await axios({
      method: 'POST',
      url: process.env.VUE_APP_API_URL,
      data: formData,
    })
    console.log(result)
  } catch (error) {
    console.error(error)
  }
},

现在正如我所说，它有效，但前提是我在“dropzoneOptions”中使用假网址。如果我什么都不写，我什至无法选择要上传的文件（现在我只是使用“http://localhost”来使其工作）。

我还尝试在未设置“url”时拖放文件，它只是在浏览器中下载文件。

我的问题是：

有没有更好的方法将 Dropzone 与 graphql 一起使用？也许我做错了

如果有人可以帮助我，我真的很感激。

4

1 回答 1

3

您必须在选项中声明 autoProcessQueue 并设置为 false。

用它 ：

<dropzone id="foo" ref="el" :options="options" @vdropzone-file-added="sendingFile"></dropzone>

声明选项：

data() {
  return {
    // See https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
    options: {
      // important : set autoProcessQueue on false
      autoProcessQueue: false,
      // url
      url: 'http://localhost',
      previewsContainer: false,
    },
  }
},

在您的方法中：

methods: {
  sendingFile(file) {
    // Dispatch your file
    ...
  },
},
于 2021-01-10T12:51:17.330 回答