input上传图片时卡顿和vant图片上传

• 上传图片卡顿

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