Загрузка файлов с использованием vue. $ Http не работает на chrome mobile - PullRequest
Новая
       15

Загрузка файлов с использованием vue. $ Http не работает на chrome mobile

0 голосов
/ 04 мая 2020

В моем vue есть функция, которую я использую для загрузки файлов из облачного хранилища Firebase. Функции выглядят так: 

    forceFileDownload(response, issue, index){
        const increment = firebase.firestore.FieldValue.increment(1)
        db.collection('issues').doc(this.ids[index]).update({
            downloads: increment
        })
        var extension = mimeTypes.extension(response.headers['map']['content-type'][0]);


        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', issue['name']+"."+extension) //or any other extension
        document.body.appendChild(link)
        link.click()
    },
    downloadWithVueResource(issue, index) {
        this.$http({
            method: 'get',
            url: issue['path'],
            responseType: 'arraybuffer'
        })
        .then(response => {
            this.forceFileDownload(response, issue, index)  
        })
        .catch(() => console.log('error occured'))
    },

Как вы можете видеть выше, я использую vue-resource для загрузки файла. Причина, по которой я делаю это вместо привязки ссылки к тегу привязки, заключается в том, что файл динамически отображается с использованием v-for следующим образом: 

<div v-for="(issue, index) in issues" :key="index">
    <button @click="downloadWithVueResource(issue, index)">Download</button>
</div>

Это прекрасно работает на моем Ubuntu chrome и на сафари на моем телефоне. Но это не работает в chrome на моем телефоне. Я не понимаю, почему это происходит. Любая помощь будет оценена. Спасибо

1 Ответ

1 голос
/ 04 мая 2020

Вы можете проверить Chrome Атрибут загрузки не работает для потенциальных решений для атрибута download. Вы также можете проверить, какая у вас версия и поддерживает ли она атрибут download здесь .

Вы сказали, что причина использования vue -ресурса в том, что

Причина, по которой я делаю это вместо привязки ссылки к тегу привязки, заключается в том, что файл динамически отображается с помощью v-for

Вы должны иметь возможность использовать тег привязки. Единственные причины (о которых я знаю), что вы не можете использовать тег привязки для загрузок, - это если на вашем бэкэнде есть какая-то аутентификация, которая, например, смотрит на заголовок авторизации, или вы захотите сделать какой-нибудь пользовательский javascript, например, индикатор выполнения.

Вы можете привязать href к свойству path. 

<div v-for="(issue, index) in issues" :key="index">
    <a :href="issue.path" @click="logDownload(issue, index)">Download</a>
</div>

Затем зарегистрируйте загрузку по клику: 

logDownload(issue, index)
{
    const increment = firebase.firestore.FieldValue.increment(1);
    db.collection('issues').doc(this.ids[index]).update({
        downloads: increment
    });
}
...