【报Bug】uni.uploadFile 在h5

详细问题描述

利用插件库yq-avatar上传文件时，调用uni.uploadFile上传文件，发现在浏览器里，ya-avatar传过来的是一个blob:开头的资源地址，上传到服务器端（php）进行处理时，表单是错的。文件信息并没有进入 $_FILES里面，而是在$_POST数组，最关键的问题是$_POST的信息是错的，名没有按设置的name呈现，而是分了n个数组，第一个数组将表单的信息与图片的信息混合在一起。下图是h5下服务器端收到的数据$_POST数据:

测试的时候发现APP和微信小程序都是正常的，数据上传直接进入$_FILES，下面是$_FILES打印的结果：

目前的解决办法是在h5下用XMLHttpRequest读取blob的内容，然后转换为data url格式再传到服务器端。

uploadAvatar(path, cb) {  
            if (!userManage.isLogin()) {  
                showToast('登陆后才能上传');  
                return;  
            }  

            //浏览器下数据上传采用blob上传，上传的表单php接收不到  
            //#ifdef H5  
            //blob: 地址转为data url格式，否则php获取不到  
            let xhr = new XMLHttpRequest;  
            xhr.responseType = 'blob';  
            xhr.onload = () => {  
                let recoveredBlob = xhr.response;  
                let reader = new FileReader;  
                reader.onload = () => {  
                    let blobAsDataUrl = reader.result;  
                    //上传图像  
                    this.request({  
                        method: 'POST',  
                        url: '/api/user/UserCenter/xxx',  
                        data: {  
                            d: blobAsDataUrl  
                        },  
                        success: (json) => {  
                            console.log(json);  
                            if (typeof cb === 'function') {  
                                if (json.response === config.RESPONSE.SUCCESS) {  
                                    cb.apply(null, [json]);  
                                } else {  
                                    showToast(json.message);  
                                }  
                            }  
                        },  
                        fail: (e) => {  
                            showToast('上传失败，请稍后再试');  
                        }  
                    });  
                };  
                reader.readAsDataURL(recoveredBlob);  
            };  
            xhr.open('GET', path);  
            xhr.send();  
            //#endif  

            //#ifndef H5  
            uni.uploadFile({  
                url: config.serverUrl + '/api/user/UserCenter/xxx',  
                header: this.defaultHeader(),  
                fileType: 'image',  
                filePath: path,  
                name: 'avatar',  
                success: (rsp) => {console.log(rsp);  
                    if (rsp.statusCode === 200) {  
                        if (typeof cb === 'function') {  
                            let json = JSON.parse(rsp.data);  
                            if (json.response === config.RESPONSE.SUCCESS) {  
                                cb.apply(null, [json]);  
                            } else {  
                                showToast(json.message);  
                            }  
                        }  
                    } else {  
                        showToast("头像上传出错，稍后再试");  
                    }  
                },  
                fail:(rsp)=>{  
                    showToast('头像上传出错，请稍后再试');  
                    console.log(rsp);  
                }  
            });  
            // #endif  
        }

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]
HBuilderX 2.3.4.20191014-alpha
[windows版本号]

[mac版本号]
pro 10.15

uni-app运行环境说明

[运行端是h5或app或某个小程序？]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
HBuilderX创建的

[编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]
chrome 77.0.3865.120

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]