H5多图片上传（一）

本文主要介绍多图片上传，文件也同样是适用哦。

注：案例代码展示是引入外部vue.js+mui框架实现的，思路可以参考，但是代码要有所增减哦
1.HTML页面相关代码

"addImg-content" type="file"  @change="addImg" ref="file" accept="image/*" name="upload" id="file" multiple /> //此次样式是透明，平铺在按钮上，让用户可以直接点击，也可以js直接调用input对象

2.JS页面相关代码

addImg: function(){
    files = vm.$refs.file.files; // 获取用户选取的文件集合，files需要全局定义一下哦
    if((files.length+vm.imgs.length)>3){ // 限制根据业务需求限制3张，根据实际需要自行修改 imgs 是VUE的data里面创建的，如果没有可以用缓存等形式去实现哦
        $.toast('只能选择三个文件');
        return;
    }
    var fileList = [];  // 定义一个空数组，临时存储files
    for (var i = 0; i < files.length; i++){
        fileList[i] = files[i];
    }
    for (var i = 0; i < fileList.length; i++){
        if(fileList[i]){ // 根据业务需求可以控制单张图片的大小
            var sizer = fileList[i].size; 
            if(sizer < 1024*1025*9 ) { // 此处限制9M
                var reader = new FileReader();
                var imgFile;
                reader.readAsDataURL(fileList[i]);
                    reader.onload = function(e) { // 监听图片加载
                    imgFile = e.target.result;
                    vm.imgs.push(imgFile); // 图片加载完成后，将base64的编码添加到imgs的对象中
                 };
            }else{
                files[i].value = ''; // 此处是清空files[i]防止后台报错
                $.toast('文件大小不能超过9M');
            }
        }
    }

    for (var i = 0; i < fileList.length; i++){
        if(vm.fileList.length<3){
            vm.fileList.push(fileList[i]); // 将用户选择的图片添加到新的数组fileList中，因为直接从input获取的files的对象是只读，不能进行删除等其他操作。 表单提交的时候循环遍历fileList即可
        }
    }
    vm.$refs.file.value = "";
},
delImg: function(idx) { //刪除上已选图片的方法
vm.imgs.splice(idx, 1);
    vm.fileList.splice(idx, 1);
}