解决element 照片墙上传时回显问题
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 照片墙上传时回显问题的更多相关文章
- 图片上传并回显Ajax异步篇
图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...
- SpringBoot系列——附件管理:整合业务表单实现上传、回显、下载
前言 日常开发中,大多数项目都会涉及到附件上传.回显.下载等功能,本文记录封装通用附件管理模块,并与业务模块进行整合实现上传.回显.下载 我们之前已经对文件上传下载有过记录,传送门:基于"f ...
- bootstrap fileinput控件 + django后台上传、回显简单使用
一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...
- bootstrap inputfile 使用-上传,回显
近期用bootstrap 做前端的上传,功能涉及到上传时就是召网上的教程随便弄一搜一大把,但是做到修改页面时候不知道页面该如何回显,折腾了一阵子才完成遂记录下来希望能给看到的小伙伴有点启发吧. 首先是 ...
- Element upload组件上传图片与回显图片
场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...
- 解决:github上传时出现error: src refspec master does not match any
原因分析 引起该错误的原因是,目录中没有文件,空目录是不能提交上去的 解决方法 touch README git add README git commit -m 'first commit' git ...
- Ajax图片异步上传并回显
1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...
- springboot+thymeleaf 实现图片文件上传及回显
1. 创建一个springboot工程, 在此就不多说了(目录结构). 2. 写一个HTML页面 <!DOCTYPE html> <html lang="en" ...
- 2.0 vue2+tinymce实现图片上传与回显
1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...
随机推荐
- gradle找不到java目录里的mybatis的xml文件
因为idea只编译java,gradle也默认只编译java,所以xml被忽略了. idea目前不知道如何修改,gradle修改时,需要把xml文件加上,不过gradle修改了只对gradle起作用, ...
- arm处理器的历史及现状
1 arm处理器的发展历史 arm1 arm2 arm3 arm6 arm7 arm9 arm11 arm cortex 2 arm处理器现状 arm cortex A a即application,即 ...
- HDFS HBase Solr Which one?
从访问模式角度决策 HDFS 压缩性能最优.扫描速度最快:不支持随机访问,仅支持昂贵.复杂的文件查询 HBase适合随机访问 Solr 适合检索需求 HBase访问单个记录的时间为毫秒级别,而HDFS ...
- Android Weekly Notes Issue #243
Android Weekly Issue #243 February 5th, 2017 Android Weekly Issue #243 本期内容包括: ConstraintLayout的动画; ...
- bzoj5259: [Cerc2017]区间
还是很强的一个题 ORZ肉丝哥哥 对于两个相交区间,假如他们两个都是可行的,那么他们的交也可行,不然没可能两边都把它缺的补上 那么对于答案区间,向右找到第一个可行区间右端点覆盖询问区间,就是最优的 考 ...
- 驻守深寒:寻找那些有效地关键K线
K线是组成投机市场的基本符号,也是技术分析的基本工具.可是面对浩如烟海的杂乱K线,特别是市场盘整时,经常使人们的判断发生混乱.支撑之下有支撑,阻力之上有阻力. 前人总结了大量的K线组合和由K线组成的技 ...
- ansible 自动ssh
http://szgb2016.blog.51cto.com/340201/1669731 安装 yum -y install ansible expect 生成key,ssh-keygen -t r ...
- python并发编程之多线程理论部分
阅读目录 一 什么是线程 二 线程的创建开销小 三 线程与进程的区别 四 为何要用多线程 五 多线程的应用举例 六 经典的线程模型(了解) 七 POSIX线程(了解) 八 在用户空间实现的线程(了解) ...
- 配置JDK和Tomcat环境变量(转)
1.安装JDK 安装好JDK后,再配置JDK的环境变量:在“我的电脑”上点右键—>“属性”—>“高级”—> “环境变量(N)”. 新建系统变量JAVA_HOME:C:/Program ...
- Python GIL、线程锁、信号量及事件
GIL是什么? GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执行代码.有名的编 ...