Question

我希望通过dropzone.js使用vue2-dropzone，并且需要能够上传到动态端点，但我不知道该怎么做。

预期的流程是：

将文件名和内容类型发送到服务器并返回上传网址
将文件上传到上一步返回的网址

我确实在选项中看到有url选项可以使用可以返回URL的函数，但这似乎不能很好地适应我的需要。限制是它是同步操作，而对服务器的任何查询都是异步操作，无法在return上返回响应。

任何人都可以用dropzone.js表明这是否可行？

BTW服务器实际上是通过AWS SDK的s3.getSignedUrl()创建签名的AWS S3 URL，并且还添加了额外的元数据。

Answer 1

这应该是可行的。

我看到的一个选项是使用sending事件并修改xhr对象上的url。

http://www.dropzonejs.com/#event-sending

Answer 2

您可以使用dropzone事件

执行此操作

<vue-dropzone ref="vueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-processing="dropzoneChangeUrl"></vue-dropzone>

并在你的vue

data() {
        return {
            dynamicId: 123,
            dropzoneOptions: {
                url: 'url',
                thumbnailWidth: 150,
                maxFilesize: 0.5,
                uploadMultiple: true
            }
        }
    },
methods: {
    dropzoneChangeUrl() {
            this.$refs.vueDropzone.setOption('url', `http://your-url.com/${this.dynamicId}`);
        },
}

如果要在请求中添加一些标头或在formData中添加参数，可以使用vdropzone-sending(file, xhr, formData)事件执行此操作。这是一个例子

<vue-dropzone ref="vueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-sending="sendImages"></vue-dropzone>

在你的vue

sendImages(file, xhr, formData) {
    xhr.setRequestHeader('Header', 'Your Header');
    formData.append('photos', file);
}

file是您要发送的文件（如果您有多个文件，它将为每个文件执行此功能），xhr是XMLHttpRequest，formData是FormData。

使用dropzone.js上传到动态端点？

2 个答案: