记录———封装uni-app+vant(u-upload)上传图片组件

上传图片回显,自定义图片回显样式
在这里插入图片描述

这段代码是一个Vue组件,主要实现了图片上传和预览的功能。组件接收了父组件传递的图片列表、最大图片数量和上传状态等属性。在模板中,使用了uni-easyinput组件和u-upload组件来实现图片上传和预览功能。在方法中,实现了删除图片、上传图片和预览图片的逻辑。整体功能包括图片上传、预览、删除和限制最大图片数量等。

父组件使用:
parentImgList中传入的值双向,子组件更新则父组件更新,是图片URL数组

isUploading是当前是否正在上传中

<upload-image :parentImgList.sync="form.imgList" :isUploading.sync="isUploading"></upload-image>

组件内容

<template><view><view class="photo-box flex-row"><view class="photo" v-for="(item, index) in imgList" :key="index"><view class="delete-btn" @click="deletePhoto(index, 'after')"><img src="@/assets/icon/delete.svg" /></view><view class="photo-image" @click="viewImage(item)"><img :src="item" /></view></view><!-- v-bind="$attrs" 接收父组件的传值,并赋给<u-upload>;某一属性如果子组件(本组件)已经设值,子组件的值覆盖父组件的;以maxCount属性为例,这里设了5,那么不管父组件传多少,实际用的值一直是5。 --><u-uploadv-bind="$attrs":maxCount="maxCount"name="fileList"uploadIcon="plus"width="110"height="110":previewFullImage="true"multiple@afterRead="handleAfterRead"@delete="deletePic"v-if="!isUpload && imgList.length < 6"><view class="upload-content"><u-icon name="plus" color="#6E9CFE" size="20"></u-icon></view></u-upload><view class="upload-content" v-if="isUpload && imgList.length < 6">{{ isUpload }}</view></view><view style="color: #999;font-size: 9px;margin-top: 2px;">最多上传六张</view><!-- 模态框显示大图 --><view v-if="showModal" class="modal" @click="showModal = false"><img :src="currentImage" class="modal-image" /></view><van-overlay :show="isUploading"><van-loading size="35px">图片上传中...</van-loading></van-overlay></view>
</template><script>
import { photoUploadFileAPI } from "@/api/upload.js"; // 与后端商量好的上传图片接口,使用 uni.uploadFile
import { Loading, Notify  } from 'vant-green'; // vant的组件
export default {name: "img-upload",props: {parentImgList: {type: Array,default: () => {return [];},},maxCount: {type: Number,default: 6,},isUploading: {type: Boolean,default: false}},data() {return {fileList: [],imgList: [],showModal: false,currentImage: "",isUpload: '',chooseImgNumber: 0};},watch: {parentImgList: {handler(val) {// console.log("父组件传递的数据", val);if (val) {this.imgList = val;}},deep: true,},imgList(val) {// console.log("女此案你看见", val);this.$emit("update:parentImgList", val);},},mounted() {console.log("fileList", this.value);},methods: {// s删除修改状态下原本有的照片deletePhoto(index) {this.imgList.splice(index, 1);console.log(`点击删除序号为${index}的照片`, this.imgList);},// 新增图片async handleAfterRead(event) {// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式this.chooseImgNumber++this.$emit('update:isUploading', true)let lists = [].concat(event.file);console.log('上传的图片', lists, lists.length, event.file)this.isUpload = '上传中...'for (let i = 0; i < lists.length; i++) {if (this.imgList.length < 6) {const result = await photoUploadFileAPI(lists[i].url);console.log("result>>>图片上传结果", result);if (result.success) {this.imgList.push(result.data);this.chooseImgNumber--} else {Notify({ type: 'danger', message: '图片上传失败' });}} else {Notify({ type: 'warning', message: '最多上传6张图片' })}}this.isUpload = ''this.$emit('update:isUploading', false)// console.log("fileList2", this.fileList, this.imgList, this.chooseImgNumber);// this.$emit('input', this.imgList);},viewImage(image) {this.currentImage = image;this.showModal = true;},},
};
</script><style lang="scss" scoped>
.photo-box {margin-right: 10px;flex-wrap: wrap;.photo {position: relative;.photo-image {width: 95px;height: 95px;margin-right: 10px;margin-bottom: 5px;img {width: 100%;/* 使图片宽度填满容器 */height: 100%;/* 使图片高度填满容器 */object-fit: cover;/* 保持比例并裁剪 */border-radius: 4px;}}.delete-btn {position: absolute;right: 8px;top: 0;background-color: rgba($color: #000000, $alpha: 0.1);width: 18px;border-radius: 20px;height: 18px;// font-size: 40rpx;text-align: center;// line-height: 50rpx;color: #555;}}
}.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 99999999999;
}.modal-image {max-width: 90%;max-height: 90%;
}.upload-content {display: flex;justify-content: center;align-items: center;width: 100px;height: 102px;border-radius: 3px;margin-top: 1px;border: 1px dashed #5a9fff;// background: #f4f8ff;box-sizing: border-box;
}
</style>
<style>
.van-loading, .van-loading__spinner {/* margin-top: 45%; */
}
.van-overlay {padding-top: 45vh;text-align: center;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图像处理识别】数据集合集!

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 CNN-ImageProc-Robotics 机器人 更新时间&#xff1a;2024-07-29 访问地址: GitHub 描述&#xff1a; 通过 CNN 和图像处理进行机器人对象识别项目侧重于集成最先进的深度学习技术和…

高亮变色显示文本中的关键字

效果 第一步&#xff1a;按如下所示代码创建一个用来高亮显示文本的工具类&#xff1a; public class KeywordUtil {/*** 单个关键字高亮变色* param color 变化的色值* param text 文字* param keyword 文字中的关键字* return*/public static SpannableString highLigh…

[javascript]js的五子棋让红蓝双方自己跟自己下棋

运行效果&#xff08;这是未分出胜负&#xff09;&#xff1a; 这是分出胜负&#xff1a; 源代码&#xff0c;把下边的代码放到1.html&#xff0c;然后用浏览器打开&#xff0c;就可以&#xff0c;然后刷新网页&#xff1a; <!DOCTYPE html> <html><body>&l…

【list的模拟实现】—— 我与C++的模拟实现(十四)

一、list节点 ​ list是一个双向循环带头的链表&#xff0c;所以链表节点结构如下&#xff1a; template<class T>struct ListNode{T val;ListNode* next;ListNode* prve;ListNode(int x){val x;next prve this;}};二、list迭代器 2.1、list迭代器与vector迭代器区别…

ssh隧道代理访问内网应用

目录 场景 ssh配置 .ssh目录结构 常见文件及用途 config id_rsa 和 id_rsa.pub authorized_keys known_hosts&#xff1a; known_hosts.old&#xff1a; environment&#xff1a; ssh_config&#xff1a; 配置隧道访问内网应用流程 1.生成密钥对 2.将公钥添加到远…

从0开始学习机器学习--Day26--聚类算法

无监督学习(Unsupervised learning and introduction) 监督学习问题的样本 无监督学习样本 如图&#xff0c;可以看到两者的区别在于无监督学习的样本是没有标签的&#xff0c;换言之就是无监督学习不会赋予主观上的判断&#xff0c;需要算法自己去探寻区别&#xff0c;第二张…

基于YOLOv8深度学习的智慧农业猪行为检测系统研究与实现(PyQt5界面+数据集+训练代码)

随着智慧农业的快速发展&#xff0c;畜牧业的智能化管理已逐渐成为提高生产效率、提升动物福利、降低运营成本的关键手段之一。在此背景下&#xff0c;畜牧场对动物行为的自动化监测需求日益增长&#xff0c;尤其是在大型养猪场&#xff0c;猪群的日常行为检测对于疾病预防、饲…

C++:指针和引用

指针的基础 数据在内存当中是怎么样被存储的 数据在内存中的存储方式取决于数据的类型和计算机的体系结构 基本数据类型 整数类型&#xff1a;整数在内存中以二进制补码的形式存储。对于有符号整数&#xff0c;最高位为符号位&#xff0c;0 表示正数&#xff0c;1 表示负数。…

使用esp32c3开发板通过wifi连网络web服务器

实验基本拓扑就是&#xff1a; esp32c3开发板通过Wifi模块连上局域网&#xff0c;局域网一台服务器通过FastAPI提供8000端口的web服务&#xff0c;在esp32c3开发板中烧录micropython固件&#xff0c;在python交互模式下&#xff0c;连上Wifi模块&#xff0c;并使用socket模块获…

自动化运维-检测Linux服务器CPU、内存、负载、IO读写、机房带宽和服务器类型等信息脚本

前言&#xff1a;以上脚本为今年8月1号发布的&#xff0c;当时是没有任何问题&#xff0c;但现在脚本里网络速度测试py文件获取不了了&#xff0c;测速这块功能目前无法实现&#xff0c;后面我会抽时间来研究&#xff0c;大家如果有建议也可以分享下。 脚本内容&#xff1a; #…

网络安全:我们的安全防线

在数字化时代&#xff0c;网络安全已成为国家安全、经济发展和社会稳定的重要组成部分。网络安全不仅仅是技术问题&#xff0c;更是一个涉及政治、经济、文化、社会等多个层面的综合性问题。从宏观到微观&#xff0c;网络安全的重要性不言而喻。 宏观层面&#xff1a;国家安全与…

通威传媒:移动AI数字人OLED透明屏应用案例

在科技与创新不断交融的今天&#xff0c;尼伽OLED品牌与通威传媒携手合作&#xff0c;共同推出了移动AI数字人OLED透明屏显示设备。这款设备不仅融合了尼伽OLED品牌的卓越显示技术与通威传媒的深厚积累&#xff0c;更在定点介绍、手动讲解模式、中控控制以及数字人联动等方面实…

Proteus 8.17的详细安装教程

通过百度网盘分享的文件&#xff1a;Proteus8.17(64bit&#xff09;.zip 链接&#xff1a;https://pan.baidu.com/s/1zu8ts1Idhgg9DGUHpAve7Q 提取码&#xff1a;8q8v 1.右击【Proteus8.17(64bit&#xff09;.zip】&#xff0c;选择【全部解压缩......】。 &#xff0c; 2.…

人工智能:塑造未来的工作与生活

目录 人工智能技术的应用前景与影响 人工智能的历史与现状 人工智能的应用领域 人工智能的前景与挑战 个人视角&#xff1a;人工智能的应用前景与未来 人工智能在生活中的潜力 面对人工智能带来的挑战 我的观点与建议 结语 人工智能技术的应用前景与影响 随着人工智能…

VSCode自定义插件创建教程

文章目录 一、前言二、插件维护三、调试插件四、使用 vsce 生成 vsix 插件五、问题&#xff1a;打开调试窗口后&#xff0c;输入helloworld并没有指令提示六、插件创建实战七、拓展阅读 一、前言 对于前端程序猿来讲&#xff0c;最常用的开发利器中VSCode首当其冲&#xff0c;…

vue功能基础元素使用

4.:inline"true"元素&#xff0c;能够左右元素保持在同一行 这个好处非常直观&#xff0c;但要注意和el-col同时使用时&#xff0c;就会出现el-input换行&#xff0c;即便调整好&#xff0c;放大缩小也会出现换行问题。 5.filterable 下拉框带搜索功能 6.clearable下…

uniapp 购物弹窗组件 (微信小程序)

效果图&#xff0c;暂时只适应单规格&#xff0c;居中弹出和下方弹出&#xff0c;如需求不满足&#xff0c;请自行修改代码 &#xff08;更新于24/11/15) 居中显示效果 下方弹出效果 html <template><view class"" v-if"show":class"mod…

单片机学习笔记 5. 数码管静态显示

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~ 目录 0、实现的功能 1、Keil工程 1-1 数码管显示原理 1-2 静态与动态显示 1-3 74HC573锁存器的工作原理 1-…

内容占位符:Kinetic Loader HTML+CSS 使用CSS制作三角形原理

内容占位符 前言 随着我们对HTML和CSS3的学习逐渐深入&#xff0c;相信大家都已经掌握了网页制作的基础知识&#xff0c;包括如何使用HTML标记构建网页结构&#xff0c;以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能&#xff0c;今天我们一起来完成一个有趣且实…

【YOLOv8】安卓端部署-1-项目介绍

【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients&#xff08;系数&#xff09;作用1.…