成都网站建设设计

将想法与焦点和您一起共享

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://chengdu.cdxwcx.cn/article/cohscc.html