最近开发是页面中引入的VUE+element-ui编辑商品页时遇到的问题，正好记录下来

首先从接口中获取数据，多个图片时用,分开

下面是插入到图片列表中代码

//插入到element轮播列表中
                var that = this                var bannerArr = res.data.banner.split(',')
                if (bannerArr.length > 0) {
                    bannerArr.forEach(item => {
                        var obj = {}
                        let index = item.lastIndexOf('\/');
                        let fileName = item.substring(index + 1, item.length); //最后的文件名截取出来

                        that.$set(obj, 'name', fileName);
                        that.$set(obj, 'url', item);  //修改files里面的结构（name,url）
                        that.banner.push(obj);
                    })
                }

轮播图处代码

<el-form-item label="商品轮播图">
                    <el-upload action="/admin/file_controller/upload" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                        :on-success="bannerUploadSuccess" :file-list="banner" :before-upload="beforeBannerUpload">
                        <i style="line-height:140px;" class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="bannerVisible">
                        <img width="100%" :src="form.banner" alt="">
                    </el-dialog>
                </el-form-item>

标签： element-ui 图片 列表