上传图片(基于vue3)

近期表单写的比较多，设计到上传图片和上传文件，总结了一下，一起分享

主要功能

限制图片数量
限制图片宽高
上传按钮展示/隐藏

父组件主要代码

html代码

<UploadImageref="uploadImageRef":limit-image-info="limitImageInfo"@uploadImage="uploadImage"></UploadImage>

js代码

<script setup>
import { ref } from 'vue'
import { UploadImage } from '@/widgets/index.js' //子组件路径
// 图片操作
const limitImageInfo = ref({maxWidth: 820,//上传图片最大宽度maxHeight: 608,//上传图片最大高度imageNum: 5,//上传图片最大数量limitImageSize: true,//是否限制图片宽高
})
const uploadImageRef = ref(null)//稍后再看这个的作用
let picListArr = ref([])//子组件返回的数据,主要用于父组件里前端和后端交互使用
const uploadImage = (e) => {picListArr.value = e
}
</script>

子组件主要代码

html代码
isShowUpload:上传按钮显示状态
handleUploadImage:上传事件
delImage:删除事件

<template><div class="upload-license-left"><div v-if="isShowUpload" class="left-images left-images-up"><div class="left-images-input"><inputid="uploadimage"type="file"accept="image/png, image/jpeg, image/jpg"@change="handleUploadImage"/></div></div><template v-if="pic.length"><div v-for="(item, index) in pic" :key="index" class="left-images-img"><img :src="item" alt="" /><imgclass="close-btn"src="@/pages/qyneed/need-fill/images/close.png"alt=""@click="delImage(index)"/></div></template></div>
</template>

js代码

<script setup>
import { ref, computed, watch } from 'vue'import { DialogModel } from '@/components' //封装的弹窗组件,这里不再展示
import { limitImageSize } from './help' //上传图片的限制条件
const { fetchPicUpload } = FileHandle() //图片的处理逻辑
const props = defineProps({//父组件传递的参数limitImageInfo: {type: Object,default: () => {return {}},},
})
const tempValue = ref(props.limitImageInfo)
//如果不computed传递的数据是空
const showLimitImageInfo = computed(() => {return tempValue.value
})
// eslint-disable-next-line no-console
console.log(showLimitImageInfo.value)
// 上传图片
let pic = ref([])
let picListArr = ref([])
const emits = defineEmits(['uploadImage'])
const handleUploadImage = async (e) => {showLimitImageInfo.value.limitImageSize &&(await limitImageSize(e,showLimitImageInfo.value.maxWidth,showLimitImageInfo.value.maxHeight))if (picListArr.value.length >= showLimitImageInfo.value.imageNum) {DialogModel({message: `最多可以添加${showLimitImageInfo.value.imageNum}张图片！`,cancelable: false,confirm: fialComfilmBtn,})} else {const file = e.target.files[0]let picObj = await fetchPicUpload(file)if (picObj) {pic.value.push(fileToDataurl(file))picListArr.value.push(picObj.path)}}emits('uploadImage', picListArr.value)
}
// 文件转化成url
const fileToDataurl = (file) => {return URL.createObjectURL(file)
}
// 删除图片
const delImage = (index) => {pic.value.splice(index, 1)picListArr.value.splice(index, 1)
}
//vue3将变量导出，供父组件使用
defineExpose({pic,
})
const isShowUpload = ref(true)
watch(() => picListArr.value,() => {if (picListArr.value.length >= showLimitImageInfo.value.imageNum) {isShowUpload.value = false} else {isShowUpload.value = true}},{ deep: true }
)
const fialComfilmBtn = () => {}
</script>

css主要代码

<style scoped>
#uploadimage {height: 100%;cursor: pointer;
}
.upload-license-left {display: flex;flex-wrap: wrap;
}
.left-images-up {width: 120px;height: 120px;background-image: url('@/pages/qyneed/need-fill/images/uploadIcon.png');background-size: 100% 100%;/* margin-bottom: 20px; */margin-right: 20px;
}
.left-images-input {width: 100%;height: 100%;position: relative;
}
.left-images-input input {width: 100%;height: 100%;cursor: pointer;opacity: 0;
}.left-images-img {width: 120px;height: 120px;background: #f2f2f2;position: relative;margin-right: 20px;margin-bottom: 20px;
}
.left-images-img img:first-child {width: 120px;height: 120px;position: absolute;top: 0;left: 0;border-radius: 10px;
}
.left-images-img img.close-btn {width: 24px;height: 24px;position: absolute;top: -12px;right: -12px;cursor: pointer;
}
</style>

help.js里limitImageSize 方法

import { DialogModel } from '@/components/index.js'let limitImageSize = (e, width, height) => {return new Promise((resolve, reject) => {let url = window.URL || window.webkitURLlet img = new Image()img.src = url.createObjectURL(e.target.files[0])let status = 0img.onload = () => {if (img.width > width) {DialogModel({message: `图片宽度不能超过${width}`,cancelable: false,confirm: fialComfilmBtn,})reject(false)} else if (img.height > height) {DialogModel({message: `图片高度不能超过${height}`,cancelable: false,confirm: fialComfilmBtn,})reject(false)} else {resolve(true)}}})
}
const fialComfilmBtn = () => {}
export { limitImageSize }

上传文件及文件格式快速通道

上传图片(基于vue3)相关推荐

vant 项目_基于 vue3.x+vant3.x 搭建示例项目
今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目. 目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui. 接下来讲解下使用vue3 ...
基于vue3的移动端音乐播放器
项目介绍这是一个基于vue3的移动端音乐项目,具有歌单.音乐搜索.音乐播放.登录等功能,后期会更新完善功能. 它具有以下不错的地方: 1. 使用rem布局来应对不同设备,保证设备之间的兼容性. 2. ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
基于VUE3的电子病历编辑器
基于VUE3的富文本编辑器,可同时实现医疗时间轴,电子病历编辑器,随访表单的设计与生成. 目前市面上的富文本编辑器大致可以分为三类 1.基于contenteditable 2.基于canvas 3.基 ...
基于Vue3实现扫码枪扫码并生成二维码的代码解析
基于Vue3实现扫码枪扫码并生成二维码的代码解析在本文中,我们将介绍如何使用Vue3实现扫码枪扫描条形码或二维码,并将其转换为二维码的过程.这个过程将涉及到以下步骤: 在Vue3项目中安装和导入vu ...
vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...
基于 vue3 element-plus 的暗黑模式
前言 element-plus@2.2.0 已经开始支持暗黑模式了通过在html标签上添加一个名为 dark 的类来启用基于 vue3 & element-plus 的项目现在可以方便的添 ...
基于Vue3的排班日历方案
** 基于Vue3的排班日历方案 ** 支持用户的自定义添加,个性化管理 (单节点的删除,内容添加,增加额外的交互等等) 核心代码 /*** @Description:上个年* @Author: Sh ...
多款非常优秀的基于 vue3.x 、Native UI、TypeScript 的中后台管理系统模板
前言今天给大家分享5款开源且非常优秀的基于 vue3.x . Native UI 的中后台管理系统模板,助力大家快速开发一个中后台管理系统 Soybean Admin 简介 Soybean Admi ...

上传图片(基于vue3)

近期表单写的比较多，设计到上传图片和上传文件，总结了一下，一起分享

上传图片(基于vue3)相关推荐

最新文章

热门文章