VuejsjasnyBoostrap上载多张图片的预览效果-创新互联

原版 jasnybootstrap无法进行多张图片上传后的预览，所以借鉴了一些别的方法。

成都创新互联公司主营龙州网站建设的网络公司,主营网站建设方案,成都app软件开发,龙州h5微信小程序定制开发搭建,龙州网站营销推广欢迎龙州等地区企业咨询

HTML

           

           

       

Vue代码：

//files 和 imgsrc分开，就可以了

           for (let i = 0; i < e.target.files.length; i++) {

               let picture = e.target.files[i];

               if (picture) {

                   var reader = new FileReader();

                   reader.readAsDataURL(picture);

                   reader.onload = e =>{

                       this.picSrc.push(e.target.result);

                   };

               } else {

                   swal({

                   title: '请选择上传图片',

                   confirmButtonText: '确定',

                   confirmButtonColor: '#294988',

                   type: 'error',

                   });

               }

               picture.uploadDate = new Date();

               this.files.push({pic: picture});

           }

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

分享名称：VuejsjasnyBoostrap上载多张图片的预览效果-创新互联
链接地址：http://bzwzjz.com/article/cohscc.html