Загрузка в динамическую конечную точку с помощью dropzone.js?

Question

Загрузка в динамическую конечную точку с помощью dropzone.js?

1

Я хочу использовать dropzone.js с помощью vue2-dropzone и иметь возможность загружать в динамическую конечную точку, хотя я не уверен, как это сделать.

Предполагаемый поток:

отправить имя файла и тип содержимого на сервер и вернуть URL-адрес для загрузки
загрузите файл в URL, возвращенный на предыдущем шаге

Я видел в вариантах вариант url который может принимать функцию, которая может возвращать URL-адрес, но это не похоже на мои потребности. Ограничение заключается в том, что это синхронная операция, в то время как любой запрос к серверу будет асинхронным операциям, неспособным вернуть ответ при return.

Может ли кто-нибудь указать, справляется ли это с dropzone.js?

Кстати, сервер по существу создает подписанный URL AWS S3 через s3.getSignedUrl() AWS SDK, а также добавляет дополнительные метаданные.

Andre M 07 янв. 2018, в 02:01

Источник

Теги:

javascript

dropzone.js

2 ответа

Ещё вопросы

Stefan Tanevski · Answer 1 · 2018-02-28T10-03-00.000Z

Вы можете сделать это с помощью событий 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);
}

Где файл - это файл, который вы отправляете (если у вас несколько файлов, он будет выполнять функцию для каждого из них), xhr - это XMLHttpRequest, а formData - это FormData.

Tuan Pham · Answer 2 · 2018-01-07T13-39-00.000Z

Это должно быть выполнимо.

Один из вариантов, который я вижу, - это использовать событие sending и изменить URL-адрес объекта xhr.

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