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

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

解决思路

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

解决步骤

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

二、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的有fileReaderURL.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 => {
          //后续其他操作
   });    
},

你可能感兴趣的:(有赞组件van-uploader无法上传图片(原生方法上传图片))