解决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) => { // ...
 
随机推荐
- 【BZOJ3052】[wc2013]糖果公园 带修改的树上莫队
			
[BZOJ3052][wc2013]糖果公园 Description Input Output Sample Input Sample Input Sample Output 84 131 27 84 ...
 - 编译和使用bsdiff
			
在android开发中,越到后面生成apk文件越来越大,每次用户更新都是全部下载更新,浪费时间和流量,如果能增量更新就不错了,使用bsdiff就是为了生成更新包 bsdiff下载地址:http://w ...
 - Android笔记之manifestPlaceholders
			
有时根据项目需要,AndroidManifest.xml中的meta-data的值分测试和正式 为了能自动地更换meta-data值,就需要用到manifestPlaceholders 语法:mani ...
 - Linux就该这么学--命令集合4(文件目录管理命令)
			
1.touch命令用于创建空白文件与修改文件时间:(touch [选项] [文件]) 对于在Linux中的文件有三种时间: 更改时间(mtime):内容修改时间(不包括权限的) 更改权限(ctime) ...
 - Page Objects
			
Page Objects 原文地址:https://github.com/SeleniumHQ/selenium/wiki/PageObjects Within your web app's UI t ...
 - Codeforces Round #295 (Div. 2)---B. Two Buttons( bfs步数搜索记忆 )
			
B. Two Buttons time limit per test : 2 seconds memory limit per test :256 megabytes input :standard ...
 - ffmpeg xcode 中的使用
			
最近比较闲,苦于ios设备上没有直接播放torrent 文件的软件,开始折腾了.找了不少资料有了思路.但是其中用到了ffmpeg 这个东西. ffmpeg 是通用的一个视频解决框架,用C语言编写,通用 ...
 - BZOJ 1617 [Usaco2008 Mar]River Crossing渡河问题:dp
			
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1617 题意: Farmer John以及他的N(1 <= N <= 2,500 ...
 - BZOJ1566 【NOI2009】管道取珠
			
题面 这是一道DP神题,直到我写下这句题解时也没有想明白…… 首先,这道题要我们求所有(不同输出序列的方案数)的平方和,于是我们当然就想到求所有不同输出序列的方案数……(大雾) .这道题一个巧妙的地方 ...
 - margin-top 为什么会影响父元素的 margin-top
			
1.原因: In this specification, the expression collapsing margins means that adjoining margins (no non ...