<div v-for = 'item in list'>
  <div @click="getImageTypeIndex(index)">
<el-upload
class="upload-demo"
drag
:action="uploadUrl"
:headers = "{token : userToken}" //带用户token
:on-success="getImageSuccess" //上传成功
:before-upload="beforeAvatarUpload"
:show-file-list = "false"
:on-error = "getImageError"
>
               //若上传失败,可继续拖拽
<div v-show="!item.imageUrl">
<i class="el-icon-upload"></i>
<p class="c8492A6 f14 upload-p">点击或拖拽 上传<span class="cFF8400">图片</span></p>
<p class="c8492A6 f12 upload-p">只能上传 jpg/png 文件,且不超过500kb</p>
</div>                //若上传成功,展示图片
<img v-show="item.imageUrl" :src="imgUrl + '?fileId=' + item.imageUrl + '&token=' + userToken" alt="" height="">
</el-upload>
</div>
</div>

//      获取当前index
getImageTypeIndex:function (index) {this.uploadImageType = index  //先在data里定义下,此处省略定义},

 //      图片上传成功
getImageSuccess:function (res, file) {
this.$message({
message: '上传成功!',
type: 'success'
});
     this.list[this.uploadImageIndex].imageUrl = res.data.fileId   //我这里是list里有 imageUrl 来存储图片id,展示的地方根据id自己拼url
 },

备注:el-upload 的 getImageSuccess 方法 ,暂不支持其他参数,所以为了获取列表的index,可以通过以上方法,在el-upload外层套一个div获取index, 然后再在 getImageSuccess 方法内根据 index 对数据操作。

elementui el-upload 在v-for里使用时 如何获取index的更多相关文章

  1. ElementUI的表单和vee-validate结合使用时发生冲突的解决

    在Vue项目中使用ElementUI表单时,同时又引入了vee-validate进行使用的时候,在浏览器上会出现这样的报错: [Vue warn]: The computed property &qu ...

  2. 写一个函数int get(),这个函数运行一次可以从V[N]里随机取出一个数,而这个数必须是符合1/N平均分布的

    题目:有一个函数int getNum(),每运行一次可以从一个数组V[N]里面取出一个数,N未知,当数取完的时候,函数返回NULL.现在要求写一个函数int get(),这个函数运行一次可以从V[N] ...

  3. ElementUI的Upload上传,配合七牛云储存图片

    七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传:http(s)://up.qiniup.com 华东 z0 客户端上传: http(s)://upload.qiniup ...

  4. 阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)

    分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){ let data = await this.getOssToken(); / ...

  5. element-ui(vue)upload组件的http-request方法的使用

    element-ui(vue)upload组件的http-request方法的使用 官方文档: http-request方法有一个默认的参数 content content 是一个object对象:里 ...

  6. Saiku嵌入系统使用时传参数访问saiku(十六)

    Saiku嵌入系统使用时传参数访问saiku Saiku通过iframe嵌入其他系统使用时,我们可以设定参数信息,然后根据url中参数对结果进行筛选哦. 这里我们实现的是根据日期字段进行范围查询,UR ...

  7. EntityFrameWork 使用时碰到的小问题

    EntityFrameWork 使用时碰到的小问题 1,在使用orm访问数据库的相目里,也要引用EntityFrameWork.dll,否则无法使用orm 否则,编译错误 错误 5 "Sys ...

  8. PowerDesigner15使用时的十五个问题

    15个问题列表: No.1:是不是一定要从CDM开始设计,然后在进行PDM的设计? NO.2:工具栏palette不见了,如何把它找出来? NO.3: 如何建立与数据库的关联? NO.4: 域和数据项 ...

  9. Eclipse和Android Studio中的DDMS使用时什么不同?

    http://www.jb51.net/softjc/454131.html Eclipse和Android Studio中的DDMS使用时什么不同? 相信很多经常开发Android应用的朋友应该都接 ...

随机推荐

  1. js-day01-js语言基础

    JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  2. SSIS - 7.发邮件任务

    发邮件任务在SSIS中使用特别多,当包执行失败或者有报错的时候可以用发邮件任务给管理员发邮件通知. 一.SMTP连接管理器 SMTP连接管理器是发邮件任务用来连接SMTP(Simple Mail Tr ...

  3. Spring Cloud 微服务架构全链路实践

    阅读目录: 1. 网关请求流程 2. Eureka 服务治理 3. Config 配置中心 4. Hystrix 监控 5. 服务调用链路 6. ELK 日志链路 7. 统一格式返回 Java 微服务 ...

  4. Java笔试题:给定一个ReadOnlyClass的对象roc,能否把这个对象的age值改成30?

    在Java笔试面试中,经常会遇到代码题,今天我们就来看一则Java代码笔试题. 有如下代码: Class ReadOnlyClass { private Integer age=20; public ...

  5. js注入攻击

    注入攻击一般指用户输入数据导致页面乃至整个网站.服务器异常的情况. 直接看一个例子: <html> <head> <title>Test</title> ...

  6. [Swift]LeetCode833. 字符串中的查找与替换 | Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  7. Linux 虚拟网络设备详解之 Bridge 网桥

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面几篇文章介 ...

  8. 使用 C# 代码实现拓扑排序

    0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. https://www.codeproject.com/Articles/869059/Topological-sorti ...

  9. scala打包jar并在Linux下运行

    打开 File -> Project Structure Artifacts -> + -> jar -> From Modules with dependisies... 选 ...

  10. MacPro4,1升级到MacPro5,1

    收了一台老MacPro,2009年版本,准确型号是"MacPro4,1".机器很好,美中不足的是,太老了.硬件还好说,很多部件都可以单独采购升级,特别是有了淘宝,几乎只要有的东西, ...