vue页面上传多张图片,传下标获取对应的值

<div v-for="(item,index) in imagesList"
                 :key="index">
              <el-upload class="avatar-uploader avatar-uploader-imagesUrls"
                         :action="logoUrl"
                         :show-file-list="false"
                         accept='image/jpeg,image/png'
                         :on-remove="handleRemove"
                         :on-success="(response, res, file) => handleImageListSuccess(response, res, file, index)"
                         :before-upload="beforeAvatarUpload">
                <img v-if="item"
                     :src="item"
                     class="avatar">
                <i v-else
                   class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
<div class="upImgPlaceholder"
                 v-show="imagesList.length<5">
              <el-button type="primary"
                         size="mini"
                         plain
                         @click="addMore">添加更多图片</el-button>
            </div>

把:on-success=="handleImageListSuccess"改成:on-success="(response, res, file) => handleImageListSuccess(response, res, file, index)"即可传额外的参数

data(){
    return {
        imagesList: [""]
    }
}
// 图片上传成功时回调
    handleImageListSuccess (response, res, file, index) {
      console.log(index);
      if (response.code === 1) {
        this.$message.success(response.msg)
      } else {
        this.$message.error(response.msg)
      }
      this.$set(this.imagesList, index, encodeURI(response.data));
    },

    // 图片格式检测
    beforeAvatarUpload (file) {
      const isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png'))
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isIMAGE) {
        this.$message.error(this.$t('goods.imgError.type'));
        return
      }
      if (!isLt2M) {
        this.$message.error(this.$t('goods.imgError.size'));
        return
      }
      return isIMAGE && isLt2M;
    },
// 添加更多图片
    addMore () {
      this.imagesList.push('');
    },

注意添加图片会改变数组,所以数组设置值的时候使用this.$set(arr, index,newValue);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值