javascript - Laravel/Vue JS - 无法从 Android 设备上传文件
问题描述
我有一个 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
门面写入磁盘,并将 a 保存FileEntry
到我的数据库中。整个过程在计算机和 iOS 移动设备上运行良好,对于我缺少的 Android 有什么特别的考虑吗?
解决方案
我找到了真正的原因,它与Android设备无关,与上传文件的大小无关。我添加了正确的php.ini
配置,并将继续动态压缩图像。
推荐阅读
- r - RMarkdown Beamer 自动在花括号前添加转义
- json - 使用useEffect对axios返回数据做出反应“无法读取未定义的属性'numero'”
- scala - 如果列在行中为空,则获取列名和另一个列值
- visual-studio - windows vs2015创建cuda项目,release模式下默认开启/Zi选项。如何删除它?
- amazon-web-services - 尝试获取 Fargate 启动类型任务的任务 ID
- keycloak - Keycloak 使用不同的客户端重新验证经过身份验证的用户
- javascript - 为什么单击按钮时无法运行我的javascript
- html - 实现:更改浮动操作按钮设计/图像
- arcgis-js-api - 获取代理属性“访问器”是代理目标上的只读且不可配置的数据属性,但代理未返回其实际值
- c# - 如何通过 IServiceCollection 配置自适应采样