粘贴图片上传,显示剪切板中的图片

在这里插入图片描述

<van-cell-group inset>
    <van-field
        @paste.native="(e) => handlePasting(e, index)"
        autosize
        placeholder="请将图片粘贴到此处"
    />
</van-cell-group>
<div class="img-list">
    <div
        class="img-item"
        v-for="(img, imgIndex) in item.fileList"
    >
        <img :src="img.url" alt="" srcset="" />
        <div
            class="img-delete"
            @click="handleDeleteImg(index, imgIndex)"
        >
            <van-icon
                class="img-delete-icon"
                size="16"
                name="cross"
            />
        </div>
    </div>
</div>
  // 删除一张图片
        const handleDeleteImg = (index: number, imgIndex: number) => {
            form.value[index].fileList.splice(imgIndex, 1);
        };
        // 粘贴图片
        const handlePasting = (e: any, index: number) => {
            let files = e.clipboardData.files; // 获取剪切板中的文件
            let len = files.length; // 计算长度
            for (var i = 0; i < len; i++) {  //
                let file = files[i]; // 获取文件本身
                if (files[i].type.indexOf("image") !== -1) {  // 判断是否是图片类型
                    var blobUrl = URL.createObjectURL(file);  // 通过URL.createObjectURL将文件转化为一个url 这样就可以在img标签中展示了
                    form.value[index].fileList.push({
                        url: blobUrl,
                        file: file,
                    });
                }
            }
        };
// 上传 直接循环刚才创建的fileList,然后把file对象使用append添加到formdata中
let fd: any = new FormData();
tpList.forEach((el: any) => {
    el.fileList.length &&
         el.fileList.forEach((e: any) => {
         fd.append("tp", e.file);
    });
});

存储图片的数据结构可根据实际需求来创建

总结

  • e.clipboardData.files
    ctrl-v(粘贴)事件e中有clipboardData.files,我们使用for循环遍历取出。
    注意:如果直接打印‘e.clipboardData’对象的话,可能会在控制台看不到具体的files,建议直接打印clipboardData.files对象。
  • URL.createObjectURL(file)
    再使用URL.createObjectURL(file)可以将file转化为url来展示。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在 Cython 中高效访问 scipy lil_matrix

在 Cython 中高效地访问 scipy 的 lil_matrix&#xff08;LInked List format&#xff09;可以通过以下步骤实现&#xff1a; 导入所需的模块&#xff1a; 首先&#xff0c;导入必要的模块&#xff0c;包括 numpy 和 scipy.sparse 中的 lil_matrix。定义函数原型&#xff1a; …

设备全生命周期管理平台:奏响设备管理的“高效乐章”

设备的全生命周期管理是一个复杂而关键的任务。设备的购买、安装、维护和报废都需要精细的管理和跟踪。然而&#xff0c;传统的设备管理方法往往效率低下、信息不准确&#xff0c;并且容易出现遗漏和错误。为解决这一问题&#xff0c;设备全生命周期管理平台应运而生。 设备全…

【Linux系统编程】基本指令(二)

目录 1、mv指令 2、cat指令 输出重定向 ​编辑 追加重定向 输入重定向 3、more指令 4、less指令 5、head指令 6、tail指令 与时间相关的指令 7、date指令 8、cal指令 9、find指令 10、grep指令 11、zip/unzip指令 1、mv指令 mv文件是用来对文件或目录进行重命名…

《新生向》什么是Python环境?

观前提醒&#xff1a;本文详细介绍了Python环境的结构&#xff0c;介绍了python虚拟环境基础用法&#xff0c;以及python中的环境&依赖管理 0.什么是Python环境 Python环境是指一个特定的设置&#xff0c;其中包含了运行Python代码所需的一系列软件工具和包。这个环境可以…

特斯拉FSD的硬件演进与模型压缩技术解析

引言 随着自动驾驶技术的迅速发展&#xff0c;特斯拉的全自动驾驶&#xff08;FSD&#xff09;系统也在不断进化。最近&#xff0c;特斯拉开始采用端到端的模型来优化其FSD算法&#xff0c;这种变革引发了广泛关注。本文将探讨特斯拉FSD在车载计算能力和模型压缩技术方面的最新…

基于EBAZ4205矿板的图像处理:12二值化图像的膨胀与腐蚀

基于EBAZ4205矿板的图像处理&#xff1a;12二值化图像的膨胀与腐蚀 先看效果 注意&#xff1a;我的项目中的膨胀和腐蚀是对二值化图像中的像素值为255的像素进行处理&#xff0c;而我的图像中255为白色&#xff0c;0为黑色&#xff0c;所以是对颜色为白色的像素点进行的膨胀和…

Axure “情形”的使用

这篇笔记的主要内容是如果在Axure中使用“情形”&#xff0c;对应在我们的研发中就是“判断条件”的使用 Axure情形的使用Axure添加caseAxure的if &#xff0c;sele if 条件判断 条件判断不管是在研发代码中还是实际生活中&#xff0c;无处不在&#xff0c;只是表现形式不同罢…

Python专题:十五、JSON数据格式

Python的数据处理&#xff1a;JOSN 计算机的主要工作&#xff1a;处理数据 最容易处理的数据就是结构化数据 非结构化数据&#xff1a;视频&#xff0c;文件等 近些年的大数据、数据挖掘就是对互联网中的各种非结构化的数据的分析和处理 半结构化数据 明确的结构属性&…

查询中Split函数不管用?试试这个自定义函数!

hi&#xff0c;大家好&#xff01; 我们在实际的应用中会有这样的一些情况&#xff0c;获取的一些数据是由一些特殊字符连接起来的&#xff0c;比如&#xff1a;XXX汽车\SUV\EV\纯电。类似这样的数据&#xff0c;我们在应用过程中&#xff0c;需要将数据拆开&#xff0c;如果用…

16-僵尸进程和托孤进程

进程的正常退出步骤&#xff1a; 子进程调用exit()函数退出父进程调用wait()函数为子进程处理其他事情 若进程没有按正常退出步骤&#xff0c;则有可能变为僵尸进程或者托孤进程 僵尸进程 子进程退出后&#xff0c;父进程没有调用wait()函数处理身后事&#xff0c;子进程变…

Web3 ETF软件开发技术

Web3 ETF&#xff08;交易所交易基金&#xff09;是一种基于区块链技术的ETF&#xff0c;它旨在跟踪Web3资产&#xff08;例如加密货币、NFT等&#xff09;的价值表现。Web3 ETF的开发涉及到传统ETF开发的所有技术难点&#xff0c;此外还有一些独特的挑战。北京木奇移动技术有限…

短剧私域-快速引流变现

短剧的爆火&#xff0c;衍生出了很多周边项目。 比如免费看剧App&#xff0c;短剧搜索机器人&#xff0c;短剧付费圈子等等。 这些项目的本质&#xff0c;就是借助短剧的热度&#xff0c;把流量引到自己的鱼塘进行变现。 短剧机器人大家都知道&#xff0c;目前最火的一种玩法…

【计算机网络】HTTP协议详解实战抓包分析教程

文章目录 1.HTTP简介2.HTTP报文的结构3.HTTP协议中空行的作用4.uri和url的区别5.HTTP请求5.1 HTTP请求方法5.2 HTTP请求报头 6.HTTP响应6.1 状态码 7.HTTP位于应用层(基于TCP)8.非持久和持久连接8.1 非持久连接8.2 持久连接 1.HTTP简介 HTTP&#xff08;Hypertext Transfer Pr…

高效前端工程化:Monorepo、pnpm与Vue3集成实战指南

引言 在当今快速发展的前端开发领域&#xff0c;高效地管理和组织代码库成为提升开发效率的关键。随着项目规模的扩大&#xff0c;传统的单体仓库逐渐显露出局限性&#xff0c;而新兴的包管理工具如 PNPM、项目结构模式如 Monorepo 和 Turborepo 开始受到广泛关注。将教会大家…

批量下载huggingface的仓库全部权重文件

下载huggingface的仓库全部权重文件 配置和下载git-lfs **ubuntu:**sudo apt-get install git-lfs 其他&#xff1a; 下载git-lfs Releases git-lfs/git-lfs (github.com) 配置&#xff1a; export PATH$PATH://home/software/lfs/git-lfs-3.5.1/ # 其中目录为你文件夹的目…

功能安全如何在公司顺利开展?-亚远景科技

亚远景功能安全主题线上会议报名开启&#xff01; 随着汽车技术的不断发展&#xff0c;汽车系统的复杂性和交互性大幅增加&#xff0c;功能安全成为确保驾驶员、乘客及行人安全的关键。 本场功能安全线上会议&#xff0c;亚远景为汽车行业的相关人员准备了以下内容&#xff1a…

多维 HighChart

showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- js脚本都是官方的,后两个是highchart脚本 --><script type"text/javascript" src"jquery1.7.1.min.js"&g…

中成科信票务管理系统 SeatMapHandler.ashx SQL注入漏洞复现

0x01 产品简介 中成科信票务管理系统是专注于演出剧院、体育场馆、旅游景区、游乐园、场地活动的票务管理系统,并为特殊客户量身定制票务应用解决方案,可根据用户的要求采用不同的技术载体实现门票的防伪:二维条码门票防伪技术、RFID电子门票防伪技术、手机二维码门票技术、…

09.Hadoop的安装

Hadoop的安装 1.拖拽安装包上传到/opt/software 2.解压文件到/opt/module [itwisenode2 software]$ tar -zxvf hadoop-3.1.3.tar.gz -C /opt/module/3查看文件 drwxr-xr-x. 2 itwise itwise 4096 9月 12 2019 bin drwxr-xr-x. 3 itwise itwise 4096 9月 12 2019 etc …

基于jsp+servlet的网上商城

网上商城系统&#xff08;jspservlethtmlcssjsbootstrap&#xff09; 一、运行项目 在项目的doc文件夹下&#xff0c;有文档&#xff0c;教您怎么启动项目。 二、运行截图 a.项目前端页面 b.后台登录界面 c.后台展示界面 三、用户名和密码 前台的用户名是&#xff1a;mor…