vue3.0+plus上传图片后隐藏上传图标

最新推荐文章于 2024-06-03 14:47:38 发布

原创最新推荐文章于 2024-06-03 14:47:38 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

这篇博客介绍了如何使用 Vue 和 Element UI 实现图片上传功能，特别是当上传图片达到限制数量时动态隐藏上传按钮，以及在移除图片后重新显示。通过 `v-if` 和 `v-else` 指令结合动态 class 管理上传按钮的显示状态，并通过 `on-change`、`on-remove` 事件处理图片列表的变化。同时，博客还涉及了图片预览、大小限制、上传成功回调等细节。

我这的需求是上传三张图片之后就不显示上传按钮，如果移除了某一张图片上传按钮继续展示
这里是通过动态的class来变化的

 				<el-upload
                      v-if="state.fileHandleList.length == 0"
                      :action="global.Global + '/sysoss/upload'"
                      :class="{
                        uoloadSty: state.showHandleImg,
                        disUoloadSty: state.noneHandleUrl,
                      }"
                      list-type="picture-card"
                      :limit="3"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :headers="headerObj"
                      :before-upload="beforeUploadImg"
                      :on-success="handleImageSuccess"
                      :data="filePath"
                      :on-exceed="handleExceed"
                      :on-change="imgHandleChange"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>
                    <el-upload
                      v-else
                      :action="global.Global + '/sysoss/upload'"
                      :class="{
                        uoloadSty: state.showHandleImg,
                        disUoloadSty: state.noneHandleUrl,
                      }"
                      list-type="picture-card"
                      :limit="3"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :headers="headerObj"
                      :before-upload="beforeUploadImg"
                      :on-success="handleImageSuccess"
                      :data="filePath"
                      :on-exceed="handleExceed"
                      :on-change="imgHandleChange"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>

<style>
.uoloadSty .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
</style>

下面是让css动态起来的方法

// 处理-上传图片-------------------------showHandleImg  noneHandleUrl 控制的显示隐藏------------
const handlePictureCardPreview = (file, fileList) => {
  dialogImageUrl.value = file.response.data.url;
  state.dialogVisible = true;
};
const imgHandleChange = (file, fileList) => {
  state.noneHandleUrl = fileList.length >= state.limitHandleUrl;
};
const handleExceed = (res, file) => {
  ElMessage.error("最多上传三张图片");
};
const handleRemove = (file, fileList) => {
  state.noneHandleUrl = fileList.length >= state.limitHandleUrl;
  let arr = fileList.map((item) => {
    return item.response.data.url;
  });
  handleForm.handle_pic = arr;
};
const beforeUploadImg = (file) => {
  const isImg = /^image\/(jpeg|png|jpg)$/.test(file.type);
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isImg) {
    ElMessage({
      message: "上传图片格式不对哦",
      type: "warning",
    });
    return false;
  }
  if (!isLt2M) {
    ElMessage({
      message: "上传图片大小不能超过 2MB!",
      type: "warning",
    });
    return false;
  }
  return isImg && isLt2M;
};
const handleImageSuccess = (res, fileList) => {
  // console.log(res, "file");
	//上传成功之后放到囊中
  handleForm.handle_pic.push(res.data.url);
  ElMessage.success("上传成功");
};