vue2 upload多图片上传

dom

   <el-upload
                :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
                class="avatar-uploader"
                ref="upload" 
                action="#"
                :limit="limitCountImg" //限制上传图片的数量
                :show-file-list="true" //列表展示
                :auto-upload="false" //点击上传
                list-type="picture-card"
                :http-request="handleHttpRequestIcon" //成功
                :on-change="imgChange" //change 
                :on-remove="handleRemove" //删除事件
                accept="image/jpg,image/jpeg,image/png"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

css

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: rgba(255, 255, 255, 0.06);
}
::v-deep .el-upload-list__item-actions {
  width: 100px;
  height: 100px;
}
::v-deep .el-upload-list__item-thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.06);
}
/* 上传图片时隐藏 */
::v-deep .uoloadSty .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}

script

export default{
data(){
retutn{
      showBtnImg: true,
      noneBtnImg: false,
      limitCountImg: 1,
}

},
methods:{
  imgChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },
    // 处理删除事件
    handleRemove(file, fileList) {
      // "文件已被删除：", file
      // "当前文件列表：", fileList
      this.noneBtnImg = !fileList.length <= 0;
    },
    addConfirm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loadingShow = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$refs.upload.submit();
        }
      });
    },
    handleHttpRequestIcon(file) {
      httpIconRequest(file, {
        next: (response) => {
          // console.log(response);
        },
        error: (err) => {
          this.loadingShow.close();
        },
        complete: (res) => {
          this.loadingShow.close();
          this.room.room_avatar = res.key;
        },
      });
    },
}


}