vue+element-ui 多图显示

 VUE   高蒙   阅读(309)   评论(0)   2019-03-01 11:28:57    vue element-ui 


element-ui  多图上传 图片显示问题


QQ截图20190301112518.png


代码:

<el-upload
action="/api/Upload/uploadImg"
list-type="picture-card"
accept = ".jpg,.jpeg,.gif,.png,.jpeg"
:limit = '5'
:show-file-list="true"
:file-list="editFiles"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>



handleRemove(file, fileList) { //移除图片
        this.fileChange(fileList); 
},
handlePictureCardPreview(file) { //预览图片调用
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
},
handleAvatarSuccess(res, file,fileList) {
    this.imageUrl = URL.createObjectURL(file.raw);
    this.fileChange(fileList);
},
fileChange(fileList){
        let temp_str = '';
if(fileList.length > 0) {
        for(let i=0;i<fileList.length;i++) {
            if(fileList[i].response){
                if(fileList[i].response.errcode === 0){
                    if(i===0) {
                        temp_str += fileList[i].response.path;
                }else{
                        temp_str += ',' + fileList[i].response.path; 
                }
            }
        }
    }
}
this.supplyForm.thumb += temp_str;
// console.log(this.supplyForm.thumb);
},
beforeAvatarUpload(file) { 
        const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isLt2M;
},



//照片展示
initInfo(temp) {
    let list = [];
    list = temp.split(',');
for(let i=0;i<list.length;i++) {
    this.editFiles.push({name:'name',url:list[i]})
    }
},





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客