有赞组件van-uploader无法上传图片(原生方法上传图片)

项目中有个上传图片的功能，当时选择用有赞组件van-uploader，测试阶段发现部分安卓手机无法使用，选中图片无任何反应。初步排查是van-uploader没有兼容到该版本系统导致的。有问题的机型是：小米手机（Mi-4c）MIUI 9.7.11.23|开发版 安卓版本：7.0

解决思路

简单粗暴的方法是不使用该方法，直接使用原生方法来解决。

解决步骤

以下以vue为例子：
一、HTML部分
  利用<input type="file" />的原生方法来实现图片上传。其中它的accept属性，规定文件上传进行提交的文件类型。例如只接受GIF和JPEG这两种图像，可以写成accept="image/gif,image/jpeg"。如果不限制图片格式可以写成accepte="image/*" 。

<div class="uploader_box">
   <input type="file" id="logimg"  accept="image/*"  @change="onRead" />
   <img class='camera-icon'   :src="img.camera" />
</div>

二、css部分
  由于默认的图片上传样式比较丑，所以一般需要对其进行修改。小技巧：可以将input设置为绝对定位，然后透明度设置为0，父盒子的高度根据图标高度变化即可。

样式对比图

.uploader_box{
        width:100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }
 #logimg{
       position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:0;
    }
 .camera-icon{
        width:100%;
        height:auto;
    }

三、JS部分

• 上传图片时编码格式（enctype）只能是“multipart/from-data” 。
• 利用formData格式上传图片。一般的提交限制都会要求比价多，比如展示提交的图片、对提交图片进行大小限制、对图片进行压缩等，此处暂时不考虑其他，需要的可以查看本人的其他的相关文章。
• 读取本地图片URL的有fileReader和URL.createURL两种方式。
• 本例以fileReader进行说明

  import axios form 'axios';

 onRead:function () {
        let that=this;
        let file=document.getElementById('logimg').files[0];
        let reader=new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function () {
        let content=this.result; //图片的src
        let img =new Image();
        img.src=content;
        img.setAttribute('crossOrigin', 'Anonymous');
        img.onload=function () {
             let formData = new FormData();
             let formData.append("file", file,file.name);
             that.uploadImg(formData);
            );
            }
          }
        };
      },

 uploadImg:function(formData){
     let that=this;
     const instance=axios.create({ withCredentials: true})
     let config = { headers: { "Content-Type": "multipart/form-data" }};
     instance.post('/api/msgreply/UploadImg',formData,config).then(res => {
          //后续其他操作
   });    
},