js中 h5上传图片 android上传图片

这个android传图片以及回显的问题也困扰了好久，在此记录下解决方案。
项目背景，h5独立的移动端和android内嵌套h5
h5上传方法：
页面中代码，注意要用multiple，这个点击事件不给h5使用

    <form action="" method="post" id="uploadForm" enctype="multipart/form-data">
                     <span id="upSpan">
                        <img src="/img/customer_icon_1.png" id="upImg"/>
                        <input type="file" accept="image/*" name="file" capture="camera" id="file"  multiple onclick="upfile()">
                        <!--<input type="file" accept="image/*" name="file" capture="camera" id="file"  multiple >-->
                     </span>
                </form>

js中接收，h5调用的是域改变事件

//上传图片  h5 可以调用的域改变事件
$('#file').change(function (data) {
    var file = this.files[0];
    // 确认选择的文件是图片
    if (file.type.indexOf("image") == 0) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            // 图片base64化
            var newUrl = this.result;
            //此处判断头像是否上传成功，获取调用提交表单后的结果，成功则更改头像，失败则还是原来的头像
            if ($('.ImgDiv').children().length < 8) {
                var imgFile = document.getElementById('uploadForm');
                //调用上传图片的接口newUrl
                uploadImgFunc(file)
                $('.ImgDiv').append("<img src='" + newUrl + "' οnclick='delImg(this)' id='" + $('.ImgDiv').children().length + "'>")
            } else if ($('.ImgDiv').children().length == 8) {
                $('.ImgDiv').append("<p>最多可上传8张图片</p>")
            } else {

            }
        };
    }
});

调用接口，注意要new FormData()，无需设置contentType

function uploadImgFunc(data) {
    console.info(data)
    var formDara = new FormData();
    formDara.append("file", data);
    var dataUrl = dataAPI.uploadImg;
    dataAPI.dataTokenImgRequest(dataUrl, formDara, 'POST', {}).then((resolve, reject) => {
        var thisObjLink = eval('(' + resolve + ')');
        var thisLink = thisObjLink.link
        imgArr.push(thisLink)
        console.info(imgArr)
    }).catch(err => {
        console.log(err);
    });
}

android上传图片，将android传来的base64照片直接回显上，并调用转换成文件流，传给接口。

function cameraResult(path) {
    //此处判断头像是否上传成功，获取调用提交表单后的结果，成功则更改头像，失败则还是原来的头像
    if ($('.ImgDiv').children().length < 8) {
        var thisFile = convertBase64UrlToBlob(path)
        alert("文件对象：" + thisFile)
        uploadImgFunc(thisFile)
        $('.ImgDiv').append("<img src='" + path + "' οnclick='delImg(this)' id='" + $('.ImgDiv').children().length + "'>")
    }  else if ($('.ImgDiv').children().length == 8) {
        $('.ImgDiv').append("<p>最多可上传8张图片</p>")
    } else {
    }
}

要传个base64给h5，而不是临时路径，注意格式（头要有data:img/… ,）这样H5获取的时候才可以分割。这里是将base64转成文件流的方法。

//将base64转成文件对象
function convertBase64UrlToBlob(urlData) {
    console.info(urlData)
    var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {type: 'image/png'});
}

over~~~~~