element-ui v-for循环el-upload上传图片

element-ui v-for循环el-upload上传图片

 表单元素

         <div v-for="(item,index) in form.part.data" :key="item" class="group-container-item">
            <el-button type="danger" icon="el-icon-delete" size="mini" circle style="position: absolute;right: 5px;top: 5px;" ></el-button>
            <div class="group-container-left">
              <el-form-item label="上标题" prop="title" label-width="85px">
                <el-input v-model="item.title" :placeholder="请输入上标题" style="width:250px"></el-input>
              </el-form-item>
            </div>
            <div class="group-container-right">
              <el-upload class="banners-uploader" name="img" :show-file-list="false" :action="imgUploadUrl" :on-success="handleUploadSuccess.bind(null,{'index':index,'data':item})" accept="image/jpeg,image/gif,image/png,image/webp">
                <el-image v-if="item.imgUrl" :src="item.imgUrl" style="max-width:180px" class="avatar" alt="点击上传新图">
                </el-image>
                <i v-else class="el-icon-plus banners-uploader-icon" />
              </el-upload>
            </div>
          </div>

图片上传成功,返回bind绑定的数据

    handleUploadSuccess(obj, res, file) {
      console.log("索引:"+ obj.index);
      console.log("索引:"+ obj.data);
    },

上一篇:html+大文件上传


下一篇:Golang HTTP上传下载