记录————封装vue3+element-plus(el-upload)上传图片组件

AI介绍:

  1. 显示已上传的图片列表,并提供删除和预览功能。
  2. 支持上传新的图片,并在上传成功后显示在列表中。

代码的具体步骤如下:

  • 在模板中,使用v-for指令遍历imageUrls数组,显示已上传的图片,并为每张图片绑定鼠标移入和移出事件。
  • 使用el-upload组件实现图片上传功能,配置了上传成功、上传前、上传进度等事件的处理函数。
  • 使用el-dialog组件实现图片预览功能,点击图片时弹出对话框显示大图。
  • 在脚本部分,使用refwatch来监听图片列表的变化,并处理上传成功、上传前、预览、删除等操作的逻辑。
  • 使用showIcons函数控制鼠标移入移出时的图标显示和隐藏。

整体来说,该代码实现了一个功能完善的图片上传组件,用户可以上传、预览和删除图片。

父组件使用:

双向绑定后数据会更新

<UploadImg v-model:img-list="formData.afterRepairImg"></UploadImg>

子组件即封装

<template>
  <div class="img-box">
    <div class="image-container" v-for="(item, i) in imageUrls" :key="item">
      <img class="image" :src="item" @mouseover="showIcons" @mouseleave="hideIcons" />
      <div class="icon-container" v-show="showIcons">
        <el-icon class="zoom-icon" @click="handlePictureCardPreview(item)"><zoom-in /></el-icon>
        <el-icon class="delete-icon" @click="handleRemove(i)"><Delete /></el-icon>
      </div>
    </div>
    <el-upload
      class="avatar-uploader"
      action="#"
      list-type="picture-card"
      :http-request="customUpload"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList"
      :show-file-list="false"
      multiple
    >
      <el-icon class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
  </div>

  <el-dialog v-model="dialogVisible" width="90%" top="20px">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import { UploadProps, ElMessage, UploadUserFile } from 'element-plus'
import { photoUploadFileAPI } from '@/api/upload'
import { Delete, Download, Files, Plus, ZoomIn } from '@element-plus/icons-vue'

const props = defineProps({
  imgList: {
    type: Array,
    required: true
  }
})

const imageUrl = ref('')
const imageUrls = ref([])
const fileList = ref<UploadUserFile[]>([])
const emit = defineEmits(['update:imgList'])

// 监听 imgList 的变化
watch(
  () => props.imgList,
  (newVal, oldVal) => {
    if (newVal.length > 0) {
      // console.log('父组件图片数组', props.imgList, fileList)
      imageUrls.value = newVal as any
    }
    // 在这里可以执行其他逻辑
  }
)
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  // console.log('你从', response, uploadFile)
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

// 上传文件,请求接口,并且将结果存储
function customUpload(file: any) {
  let formData = new FormData()
  // console.log('查看', file.file)
  formData.append('file', file.file)
  photoUploadFileAPI(formData).then((res: any) => {
    const imgUrl = res.data.data
    imageUrls.value.push(imgUrl)
    console.log('图片提交返回', res, imageUrls, fileList)
    emit('update:imgList', imageUrls)
  })
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
  const isImage = rawFile.type.startsWith('image/') // 检查是否为图片类型

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true
}
    
const handleUploadProgress: UploadProps['onProgress'] = (event, file, fileList) => {
  // 处理上传进度的逻辑,例如更新进度条状态
  const uploadFile = fileList.find(item => item.uid === file.uid)
  if (uploadFile) {
    uploadFile.percentage = event.percent  // 更新上传进度
    fileList.value = [...fileList]  // 更新文件列表
  }
  const fileItem = fileList.value.files.find((f: any) => f.file === file);
	if (fileItem) {
		fileItem.progress = Math.round(event.percent);
	}
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
  dialogImageUrl.value = uploadFile as any
  dialogVisible.value = true
}

const handleRemove = (i: number) => {
  // 从 fileList 中移除被删除的文件
  // fileList.value = fileList.value.filter(file => file.uid !== uploadFile.uid)
  imageUrls.value.splice(i, 1)
  console.log(i, imageUrls)
  emit('update:imgList', imageUrls)
}

const showControlsIcons = ref(false)
const showIcons = () => {
  // console.log('鼠标移入')
  showControlsIcons.value = true
}

const hideIcons = () => {
  // console.log('鼠标移出')
  showControlsIcons.value = false
}
</script>

<style lang="scss" scoped>
.img-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
.image-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  img {
    border: 1px dashed var(--el-border-color);
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    text-align: center;
    border-radius: 10px;
    object-fit: cover;
    margin: 0 1px;
  }
}
}


.icon-container {
  position: absolute;
  top: 0;
  left: 0;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s;
  .el-icon {
  font-size: 20px;
  margin: 0 10px;
}
}

.image-container:hover .icon-container {
  opacity: 1;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-upload-list__item {
  align-items: center;
}

.el-dialog__body {
  margin-top: 20px;
  text-align: center;

  img {
    min-height: 50vh;
  }
}
</style>
相关推荐
brief of gali7 分钟前
记录一个奇怪的前端布局现象
前端
计算机毕设指导610 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者1 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理