У меня есть веб-приложение Laravel / Vue JS, в котором пользователи могут загружать файлы и фотографии.Все работает нормально, пока я не попробую это на устройствах Android, где вызов axios просто висит навсегда.Вот мой код:
Vue JS компонент
<template>
<span>
<v-btn @click="pickFile">
<small>{{ label }}</small>
</v-btn>
<input type="file" style="
visibility:hidden;visibility: hidden;
position: absolute;
width: 1px;
height: 1px;
left: 0;
right: 0;"
ref="upload" :accept="accept" @change="onFilePicked"> // accept is defined in the element's props
</span>
</template>
Методы Vue JS компонентов
methods: {
pickFile() {
this.$refs.upload.click()
},
onFilePicked (e) {
const files = e.target.files
let elem = this
let valid = true
Event.$emit('uploading')
if(files[0] !== undefined) {
elem.fileName = files[0].name
if(elem.fileName.lastIndexOf('.') <= 0) {
return
}
const fr = new FileReader ()
fr.readAsDataURL(files[0])
fr.addEventListener('load', () => {
let formData = new FormData();
formData.append('file',files[0]);
formData.append('document',elem.document);
formData.append('pedido',elem.pedido);
console.log(formData)
axios.post('/files/upload-file',formData, { headers: {'Content-Type': 'multipart/form-data'}})
.then(response => {
//console.log(response);
Event.$emit('fileUploaded', response.data.filepath);
Event.$emit('alert', 'Tu archivo se guardó exitosamente');
});
});
} else {
elem.fileName = ''
}
}
},
Вбэкэнд, я использую фасады Input
, Storage
и File
для записи на диск и сохраняю FileEntry
в своей базе данных.Весь этот процесс прекрасно работает на компьютерах и мобильных устройствах iOS, есть ли какие-то особые соображения по поводу Android, которые мне не хватает?