-
上传图片卡顿
使用vant的上传文件组件实现头像上传时,发现在低版本谷歌浏览器上,点击上传会卡顿,过一会才展示文件选择,如下为vant的文件上传组件
<van-uploader v-model="headpic"></van-uploader>
其实是封装input,通过accept设置可以接收的文件类型为image类型的,来实现图片上传
解析后html如下:
组件默认accept为image/*;
修改accpect的值为具体文件格式,即可解决问题
如下:
<van-uploader accept="image/png,image/jpg, image/jpeg, image/gif" v-model="headpic">
</van-uploader>
原因
原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件,
但是如果连接比较慢,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时
使用accept="image/png, image/jpeg, image/gif"就可以解决这个问题,因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。
-
图片多选属性multiple在某些安卓ios上不起作用
将multiple设置为false,单选上传头像时,发现iphonex上不起作用。
我的解决方法:当属性在某款手机失效,可以多选图片时,通过绑定上传前的回调函数,来判断是否多选了图片,从而终止或继续上传
html
<van-uploader :multiple="false" :before-read="beforeRead"></van-uploader>
js
// 返回布尔值
beforeRead(file) {
if (file[1]) {
this.toast('请单张上传');
return false;//可终止文件读取
}
return true;
},
-
网络慢,图片上传请求未返回,本地图片已完成,造成数据错误
解决方法:在文件读取时,给文件增加上传中状态,在图片上传请求返回后,将文件状态置为已完成或者失败
html
<van-uploader :after-read="afterRead"></van-uploader>
js
//文件读取完成后的回调函数
afterRead(file) {
//在这个方法体中写请求
//上传中
file.status = 'uploading';
file.message = '上传中...';
//上传失败
file.status = 'failed';
file.message = '上传失败';
//上传完成
file.status = '';
file.message = '';
},