vue2 upload多图片上传

最新推荐文章于 2025-05-30 16:05:01 发布

lipenghao111

最新推荐文章于 2025-05-30 16:05:01 发布

阅读量550

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/lipenghao111/article/details/138193824

文章详细描述了如何在Vue应用中使用el-upload组件进行图片上传，包括CSS样式定制以控制显示和隐藏，以及处理文件上传、删除和HTTP请求的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
        },
      });
    },
}


}