使用放置区上传到动态端点.js

Question

我希望通过vue2-dropzone使用dropzone.js，并且需要能够上传到动态端点，尽管我不确定如何做到这一点。

预期的流程是：

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

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

谁能指出这是否适用于 dropzone.js？

顺便说一句，服务器本质上是通过s3.getSignedUrl() AWS 开发工具包创建签名的 AWS S3 URL，并添加额外的元数据。

Answer 1

您可以使用拖放区事件执行此操作

<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。

Answer 2

这应该是可行的。

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

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