elementui el-upload 在v-for里使用时 如何获取index
<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的更多相关文章
- ElementUI的表单和vee-validate结合使用时发生冲突的解决
在Vue项目中使用ElementUI表单时,同时又引入了vee-validate进行使用的时候,在浏览器上会出现这样的报错: [Vue warn]: The computed property &qu ...
- 写一个函数int get(),这个函数运行一次可以从V[N]里随机取出一个数,而这个数必须是符合1/N平均分布的
题目:有一个函数int getNum(),每运行一次可以从一个数组V[N]里面取出一个数,N未知,当数取完的时候,函数返回NULL.现在要求写一个函数int get(),这个函数运行一次可以从V[N] ...
- ElementUI的Upload上传,配合七牛云储存图片
七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传:http(s)://up.qiniup.com 华东 z0 客户端上传: http(s)://upload.qiniup ...
- 阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){ let data = await this.getOssToken(); / ...
- element-ui(vue)upload组件的http-request方法的使用
element-ui(vue)upload组件的http-request方法的使用 官方文档: http-request方法有一个默认的参数 content content 是一个object对象:里 ...
- Saiku嵌入系统使用时传参数访问saiku(十六)
Saiku嵌入系统使用时传参数访问saiku Saiku通过iframe嵌入其他系统使用时,我们可以设定参数信息,然后根据url中参数对结果进行筛选哦. 这里我们实现的是根据日期字段进行范围查询,UR ...
- EntityFrameWork 使用时碰到的小问题
EntityFrameWork 使用时碰到的小问题 1,在使用orm访问数据库的相目里,也要引用EntityFrameWork.dll,否则无法使用orm 否则,编译错误 错误 5 "Sys ...
- PowerDesigner15使用时的十五个问题
15个问题列表: No.1:是不是一定要从CDM开始设计,然后在进行PDM的设计? NO.2:工具栏palette不见了,如何把它找出来? NO.3: 如何建立与数据库的关联? NO.4: 域和数据项 ...
- Eclipse和Android Studio中的DDMS使用时什么不同?
http://www.jb51.net/softjc/454131.html Eclipse和Android Studio中的DDMS使用时什么不同? 相信很多经常开发Android应用的朋友应该都接 ...
随机推荐
- C++ pair方法/vector方法
一,pair方法 类模板:template <class T1, class T2> struct pair 参数:T1是第一个值的数据类型,T2是第二个值的数据类型. 功能:pair将一 ...
- 深入理解JVM(四)——垃圾回收算法
我们都知道java语言与C语言最大的区别就是内存自动回收,那么JVM是怎么控制内存回收的,这篇文章将介绍JVM垃圾回收的几种算法,从而了解内存回收的基本原理. stop the world 在介绍垃圾 ...
- 原生javascript实现 下拉框搜索功能
由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...
- 【二代示波器教程】第12章 示波器设计—DAC信号发生器的实现
第12章 示波器设计—DAC信号发生器的实现 本章节为大家讲解二代示波器中信号发生器的实现.这个功能还是比较实用的,方便为二代示波器提供测试信号.实现了正弦波,方波和三角波的频率,幅度以及占 ...
- OSGi解决的问题
osgi最明显的缺陷 bundle尽管可以为隔离的服务建立独立生命周期管理的热部署方式,以及明确的服务导出和导入依赖能力,但是其最终基于jvm,无法对bundle对应的服务实现计算资源的隔离,一个服务 ...
- [Swift]LeetCode275. H指数 II | H-Index II
Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a ...
- mysql逆向生成 java 实体类
import java.io.File; import java.io.FileWriter; import java.io.PrintWriter; import java.sql.Connecti ...
- Entity Framework Core 2.0 入门
该文章比较基础, 不多说废话了, 直接切入正题. 该文分以下几点: 创建Model和数据库 使用Model与数据库交互 查询和保存关联数据 EF Core支持情况 EF Core的数据库Provide ...
- 1.python简介
简介 1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和 ...
- 用了 HTTPS 还不安全,问题就出在低版本 TLS 上
HTTPS 加密时代已经来临,近两年,Google.Baidu.Facebook 等互联网巨头,不谋而合地开始大力推行 HTTPS, 2018 年 7 月 25 日,Chrome 68 上线,所有 H ...