1.先看看样式:

<el-upload
class="imgList"
action="1165165"
list-type="picture-card"
:limit="20"
:file-list="explainImgList"
:on-remove="handleRemove"
:on-exceed="handleExceed" //超过上传数量时触发
:http-request="uploadImgList">
<i class="el-icon-plus" style="position: relative;bottom: 27px;"></i>
</el-upload>
2.照片回显时参数要对应上才行(这里官方文档没说明,有点坑),如下
uploadImgList(item) {
/* 上传账号说明图 */
let formData = new FormData()
formData.append('file', item.file)
UploadFile('/web/account/upload.json', formData).then(res => {
this.explainImgList.push({
'name': item.file.name,
'uid': item.file.uid,
'url': res.fileKey
})
Message.success('上传成功')
}).catch(err => {
console.log(err)
Message.error('上传失败')
})
}
handleRemove(file, fileList) {
/* 移除图片 */
this.explainImgList = fileList
}
3.样式也可以强制改成我们想要的
<style>
.imgList .el-upload--picture-card {
width: 82px;
height: 82px;
} .imgList .el-upload-list--picture-card .el-upload-list__item {
width: 82px;
height: 82px;
} .imgList .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 82px;
height: 82px;
}
</style>

解决element 照片墙上传时回显问题的更多相关文章

  1. 图片上传并回显Ajax异步篇

    图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...

  2. SpringBoot系列——附件管理:整合业务表单实现上传、回显、下载

    前言 日常开发中,大多数项目都会涉及到附件上传.回显.下载等功能,本文记录封装通用附件管理模块,并与业务模块进行整合实现上传.回显.下载 我们之前已经对文件上传下载有过记录,传送门:基于"f ...

  3. bootstrap fileinput控件 + django后台上传、回显简单使用

    一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...

  4. bootstrap inputfile 使用-上传,回显

    近期用bootstrap 做前端的上传,功能涉及到上传时就是召网上的教程随便弄一搜一大把,但是做到修改页面时候不知道页面该如何回显,折腾了一阵子才完成遂记录下来希望能给看到的小伙伴有点启发吧. 首先是 ...

  5. Element upload组件上传图片与回显图片

    场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...

  6. 解决:github上传时出现error: src refspec master does not match any

    原因分析 引起该错误的原因是,目录中没有文件,空目录是不能提交上去的 解决方法 touch README git add README git commit -m 'first commit' git ...

  7. Ajax图片异步上传并回显

    1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...

  8. springboot+thymeleaf 实现图片文件上传及回显

    1. 创建一个springboot工程, 在此就不多说了(目录结构). 2. 写一个HTML页面 <!DOCTYPE html> <html lang="en" ...

  9. 2.0 vue2+tinymce实现图片上传与回显

    1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...

随机推荐

  1. iframe调用父页面js函数 方法 元素

    在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中   src属性传参 <iframe src="test.jsp?i ...

  2. 九度OJ 1110:小白鼠排队 (排序)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1734 解决:1054 题目描述: N只小白鼠(1 <= N <= 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的 ...

  3. Cocos2d-JS开发中的一些小技巧

    1.获取URL中的请求参数的值----此方法接收参数名 function getQueryString(name) { var reg = new RegExp("(^|&)&quo ...

  4. UI 自动化测试工具BackstopJS简介(1)

    BackstopJS源码地址 https://github.com/garris/BackstopJS 我写了一个DEMO放到github上面,https://github.com/shenggen1 ...

  5. PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/modules/redis.so' - /usr/lib64/php/modules/redis.so: undefined symbol: igbinary_serialize in Unknown on line 0

    网上找到两种解决方法, 1.先删除php-pecl-redis,再用pecl install redis 2.安装php-igbinary模块,不过我安装时包冲突了,没有安装成功,所以用了第一种方法

  6. 为 Android 平台开发一个输入法

    学习目标: 实现新的输入法 学习目的: 掌握Android输入法框架 学习收获: Android 1.5 新特色之一就是输入法框架(Input Method Framework,IMF),正是它的出现 ...

  7. codeforces B. Ciel and Flowers 解题报告

    题目链接:http://codeforces.com/problemset/problem/322/B 题目意思:给定红花.绿花和蓝花的朵数,问组成四种花束(3朵红花,3朵绿花,3朵蓝花,1朵红花+1 ...

  8. 脚踏实地学C#5-扩展方法

    扩展方法(Extension Method) MSDN定义:能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法须知: 1.扩展方法声明所在的类必须被声明为 ...

  9. nyoj 86 --位标记

    nyoj 86 --位标记 点击打开题目链接 :                        找球号(一)  这道题目很多解法,其他解法请参考 http://www.cnblogs.com/play ...

  10. UVA-12293(组合游戏)

    题意: 有两个相同的盒子,一个盒子里面有n个球,另一个盒子里面有1个球,每次清空球较少的那个盒子,然后从另外的一个盒子里拿到空盒子里使得操作后两个盒子至少有一个球,判断是先手还是后者胜; 思路: 跟每 ...