js/vue实现input file多张图片上传及预览，限制图片数量，对应每个图片文件名，删除图片

js input file 多图片上传，一次性上传多张图片（前端预览功能）；

• 运用js实现上传图片前的预览（支持多张图片），网上很多案例都是没有处理每个上传的图片文件名，这里我就增加了图片文件名的方法，删除对应图片的方法，希望亲们可以在项目中用到…
• 删除对应图片记得要清除inputfile里面的value，否则同名的图片只能上传1次；
• 其他input file多文件方法类似，用到FileReader读取文件的方式…

先来个效果图：

因为原生js结构比较麻烦，就写了一个基于vue的方法…
html结构：

<section id="vue-imgUpload">
    <div class="upload-pic">
        <label class="up-lab" for="add-pic-btn">上传图片集</label>
        <input type="file" accept="image/*" multiple class="up-file" id="add-pic-btn" @change="addImg()">
    </div>
    <div class="group-coms-pic" v-if="list.length>0" v-cloak>
        <div class="item" v-for="(v,i) in list" :key="i" >
            <div class="pic-box">
                <img class="img" :src="v.src">
            </div>
            <div class="tk">{{v.name}}</div>
            <span class="del" @click="delImg(i)">x</span>
        </div>
    </div>
</section>

js功能：

//vueImgUpload
    const vueImgUpload = new Vue({
        el: '#vue-imgUpload',
        data(){
            return{
                list:[], //用于结构渲染
                allArr:[],  //存储每次上传的所有flie，
                limitNum:3, //限制数量
            }
        },
        methods:{
            //添加图片
            addImg(){
                let that = this;
                var obj = that.getId('add-pic-btn'),
                    obArr =  obj.files,
                    length = obArr.length,
                    arr = [],
                    limitNum = that.limitNum;
                for(let x of obArr){
                    var params = {name: x.name, src:''};
                    arr.push(params);
                }
                that.allArr = [...that.allArr,...arr];
                //定义一个函数作回调
                const Pro = function () {
                    return new Promise(function (resolve, reject) {
                        arr.forEach((v,i,array)=>{
                            resolve(array)
                        });
                    })
                };
                Pro().then((newArr)=>{
                    // console.log(newArr);
                    for(let i=0; i<newArr.length; i++) {
                        var reader = new FileReader();
                        if (!reader) {
                            console.log('对不起，您的浏览器不支持！请更换浏览器试一下');
                            return
                        }
                        //读取成功
                        reader.onload = function(e) {
                            // console.log(e)
                            var _src = e.target.result;
                            newArr[i].src = _src;
                            that.clearVal();
                        };
                        reader.onloadstart=function(){
                            console.log('开始')
                        };
                        reader.onprogress=function(e){
                            if(e.lengthComputable){
                                console.log("正在读取文件")
                            }
                        };
                        reader.error = function(){
                            console.log("读取异常")
                        };
                        reader.readAsDataURL(obj.files[i]);
                    }
                    //合并数组,先合并在删除多余；
                    var len1 = that.list.length,
                        len2 = newArr.length;
                    var d = [...that.list,...newArr];
                    that.list = d;
                    // console.log(len1,len2,d)
                    if(d.length > limitNum){
                        alert(`最多只能上传${limitNum}张图片`);
                        that.list.splice(limitNum,d.length-limitNum);
                        // console.log(that.list)
                    }
                });
            },
            //删除图片
            delImg(i){
                var flag = confirm(`确认要删除名为：${this.list[i].name}的图片？`);
                if(flag) {
                    this.list.splice(i,1);
                    this.allArr.splice(i,1);
                }
                //这个得清空，不然全部被删除后，无法再次上传同一图片
               if(this.list.length<=0){
                   this.clearVal();
               }
            },
            //每次上传完清除一下value
            clearVal(){
                this.getId('add-pic-btn').value = null;
            },
            //dom
            getId(id){
                return document.getElementById(id);
            }
        }
    })

有什么错误或优化的地方，可以提出来，大家一起学习研究…