1. <div v-for = 'item in list'>
  2.   <div @click="getImageTypeIndex(index)">
  3. <el-upload
  4. class="upload-demo"
  5. drag
  6. :action="uploadUrl"
  7. :headers = "{token : userToken}" //带用户token
  8. :on-success="getImageSuccess" //上传成功
  9. :before-upload="beforeAvatarUpload"
  10. :show-file-list = "false"
  11. :on-error = "getImageError"
  12. >
                   //若上传失败,可继续拖拽
  13. <div v-show="!item.imageUrl">
  14. <i class="el-icon-upload"></i>
  15. <p class="c8492A6 f14 upload-p">点击或拖拽 上传<span class="cFF8400">图片</span></p>
  16. <p class="c8492A6 f12 upload-p">只能上传 jpg/png 文件,且不超过500kb</p>
  17. </div>
  18.  
  19.                //若上传成功,展示图片
  20. <img v-show="item.imageUrl" :src="imgUrl + '?fileId=' + item.imageUrl + '&token=' + userToken" alt="" height="">
  21. </el-upload>
  22. </div>
  23. </div>
  1.  
  1. // 获取当前index
  1. getImageTypeIndex:function (index) {this.uploadImageType = index //先在data里定义下,此处省略定义},
  2.  
  3. // 图片上传成功
  4. getImageSuccess:function (res, file) {
  5. this.$message({
  6. message: '上传成功!',
  7. type: 'success'
  8. });
  1.      this.list[this.uploadImageIndex].imageUrl = res.data.fileId //我这里是list里有 imageUrl 来存储图片id,展示的地方根据id自己拼url
  1. },

备注: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. Windows10获取VS管理员权限总是很烦人

    之前在Windows 7中,只要关闭了UAC,给当前账户管理员权限,任何程序都会以管理员身份启动.现在,在Windows 10上就行不通了.而VS又需要管理员权限才能使用附加调试等一些功能.虽然我们可 ...

  2. Java提高篇(三):内部类和匿名内部类

    一,内部类 其实内部类是十分简单的,我们根据其字里行间的意义就可以知道内部类应该是一个类当中的一个类,相当于一个类进行了嵌套,就如同循环的嵌套一般. 内部类有一个特征:内部类当中可以调用外部类当中的属 ...

  3. kali linux 网络渗透测试学习笔记(二)OWASP ZAP工具扫描SQL injection漏洞失败

    按照惯例,利用OWASP ZAP工具扫描SQL injection漏洞时,应该很快就可以扫描出来,但是在笔者进行扫描的时候,却遇到了以下状况: 这说明了该工具根本就没能够扫描出SQL注入的漏洞,不知道 ...

  4. travis-ci 中运行 puppeteer

    通过 travis-ci 可以构建基于 puppeteer 的自动化任务,基于此构建的一个 计划任务 puppeteer中调用需要禁用沙箱环境 https://github.com/GoogleChr ...

  5. ansible基础-Jinja2模版 | 测试

    一 简介 注:本文demo使用ansible2.7稳定版 Jinja2的测试语句被用来评估一个条件表达式,并且最终返回True或False,经常和「when」语句搭配使用. 测试语句和过滤器的相同点: ...

  6. [Swift]LeetCode395. 至少有K个重复字符的最长子串 | Longest Substring with At Least K Repeating Characters

    Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...

  7. [Swift]LeetCode435. 无重叠区间 | Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  8. [Swift]LeetCode838. 推多米诺 | Push Dominoes

    There are N dominoes in a line, and we place each domino vertically upright. In the beginning, we si ...

  9. [Swift]LeetCode864. 获取所有钥匙的最短路径 | Shortest Path to Get All Keys

    We are given a 2-dimensional grid. "." is an empty cell, "#" is a wall, "@& ...

  10. 记录一次安装OpenGL的漫长过程

    尝试codeblock和Dev-C++ 这学期新开了一门计算机图形图像的课,里面涉及到openGL,中午跑到图书馆开始倒腾OpenGL. 因为电脑里本来有codeblock,于是就想不用教材里面所说的 ...