记录———封装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 和图像处理进行机器人对象识别项目侧重于集成最先进的深度学习技术和…

python-docx 用法

一、简介 python-docx 是一个非常流行的第三方 Python 库&#xff0c;用于创建、修改和读取 Microsoft Word 文档&#xff08;.docx 文件&#xff09;。该库功能强大且易于使用&#xff0c;常用于自动化生成报告、格式化文档或从 Word 文档中提取信息。 二、常见用法 1. 安装…

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

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

Python Web 开发的路径管理艺术:FastAPI 项目中的最佳实践与问题解析20241119

Python Web 开发的路径管理艺术&#xff1a;FastAPI 项目中的最佳实践与问题解析 引言&#xff1a;从路径错误到模块化管理的技术旅程 在现代 Python Web 开发中&#xff0c;路径管理是一个常常被忽视却非常重要的问题。尤其是在使用像 FastAPI 和 Tortoise ORM 这样的框架时…

[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;猪群的日常行为检测对于疾病预防、饲…

「三」体验HarmonyOS端云一体化开发模板——使用DevEco Studio直接创建端云一体化工程

关于作者 白晓明 宁夏图尔科技有限公司董事长兼CEO、坚果派联合创始人 华为HDE、润和软件HiHope社区专家、鸿蒙KOL、仓颉KOL 华为开发者学堂/51CTO学堂/CSDN学堂认证讲师 开放原子开源基金会2023开源贡献之星 「目录」 「一」HarmonyOS端云一体化概要 「二」体验HarmonyOS端云一…

C++:指针和引用

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

2. langgraph中的react agent使用 (在react agent添加历史消息)

1. 导入必要的库 首先&#xff0c;我们需要导入所需的库。这里我们使用 langchain_openai 来与 智谱AI 模型进行交互&#xff0c;并使用 langchain_core.tools 来定义自定义工具。 from langchain_openai import ChatOpenAI from typing import Literal from langchain_core.…

使用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.…

【ubuntu24.04】安装mongodb社区版本

官方建议安装社区版本官方文档安装过程 Last login: Wed Oct 9 16:55:50 2024 from 192.168.50.65 root@k8s-master-pfsrv:~# sudo apt-get install gnupg curl 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 gnupg 已经是最新版 …

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

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

VSCode自定义插件创建教程

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