Laravel / Vue JS-无法从Android设备上传文件

时间:2019-04-01 21:25:04

标签: javascript android laravel vue.js file-upload

我有一个Laravel / Vue JS网络应用程序,用户可以在其中上传文件和照片。一切正常,直到我在axios呼叫永久挂起的Android设备中尝试为止。这是我的代码:

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 = ''
        }
    }
},

在后端,我使用InputStorageFile门面写入磁盘,并将FileEntry保存到数据库。整个过程在计算机和iOS移动设备上都可以正常运行,我是否缺少针对Android的特殊考虑?

1 个答案:

答案 0 :(得分:0)

我找到了真正的原因,这与Android设备无关,与上传文件的大小无关。我添加了正确的<mat-tab-group> <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}"> <div *ngFor="let element of sampleData.address; let i = index"> <md-checkbox *ngIf="i == 0">Checkbox Text</md-checkbox> <div *ngIf="address.toString() === element.addressType"> <mat-label> <span>Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}</span> </mat-label> <br /> <mat-label> City: {{ element.city }}</mat-label> <br /> <br /> </div> </div> </mat-tab> </mat-tab-group> 配置,并将继续动态压缩图像。