Vue-Dropzone 在没有"url"选项的情况下无法工作

Question

我使用Vue Dropzone上传带有graphql的文件。一切都很好，但由于我使用的是graphql，所以我不需要在"；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一起使用？也许我做错了

如果有人能帮我，我真的很感激。

Answer 1

您必须在选项中声明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
...
},
},