Home >Web Front-end >JS Tutorial >How to get index when elementui and el-upload are used in v-for

How to get index when elementui and el-upload are used in v-for

不言
不言Original
2018-07-05 17:22:363662browse

This article mainly introduces how to obtain index when elementui and el-upload are used in v-for. It has certain reference value. Now I share it with everyone. Friends in need can refer to it

<div v-for = &#39;item in list&#39;>
  <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 + &#39;?fileId=&#39; + item.imageUrl + &#39;&token=&#39; + userToken" alt="" height="180">
                      </el-upload>
                    </div>
</div>
//      获取当前index
getImageTypeIndex:function (index) {this.uploadImageType = index  //先在data里定义下,此处省略定义},



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

Remarks: The getImageSuccess method of el-upload does not currently support other parameters, so in order to obtain the index of the list, you can use the above method to get the index with a p in the outer layer of el-upload, and then use the getImageSuccess method to compare the data according to the index. operate.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Sphere flat throwing and color dynamic transformation effects implemented by jQuery and canvas

Based on JSON format data Introduction to the simple jQuery slideshow plug-in (jquery-slider)

The above is the detailed content of How to get index when elementui and el-upload are used in v-for. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn