el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除

需求：el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除，预览，在网上看了很多，都没有说怎么把数据转为file格式的，找了很久最终实现，

难点：怎么把接口获取到的图片转为file格式，如果不是file格式的话，那么后端无法识别，并且还要携带额外的参数

1.调用接口获取已上传图片，格式如下

 获取到数据后，进行回显（调用接口我就不写了，我只写数据获取到后转为file格式）

fileImgList：用于照片回显

process.env.VUE_APP_SERVE：这个是全局的，公司地址，比如https://xx.cn，如果图片显示不出来，可以问后端要不要拼接其他，可以在浏览器测试

以下这俩个方法，直接复制，把参数对好就能转为file，格式是[FILE]

imageToBase64：图片转base64

base64ToFile：base64转File

that.formInline.files：用于存储file格式图片

  query() {if (files.length > 0) {files.forEach((item) => {this.fileImgList.push({url: process.env.VUE_APP_SERVE + '/files' + item.path,name: item.originalname});var image = new Image();image.crossOrigin = '';image.src = process.env.VUE_APP_SERVE + '/files' + item.path; // 'https://xx.cn' + itemconst that = this;image.onload = function () {const base64 = that.imageToBase64(image); // 图片转base64const file = that.base64ToFile(base64, item.path); // base64转Filethat.formInline.files.push(file);};});}},imageToBase64(img) {var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();var dataURL = canvas.toDataURL('image/jpeg' + ext);return dataURL;},base64ToFile(urlData, fileName) {const arr = urlData.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bytes = atob(arr[1]); // 解码base64let n = bytes.length;const ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });}

 2.删除已上传图片

直接复制，这个是删除[FILE,FILE]的图片

 handleRemove(file) {// 从列表中删除当前的图片var that = this;try {var delname = file.url.split('/');that.formInline.files = that.formInline.files.filter((ele) => {var name = ele.name.split('/');return name[name.length - 1] !== delname[delname.length - 1];});console.log(that.formInline.files);} catch (error) {}}

3.上传图片

上传图片的change事件，每次上传成功把file.raw给files，注意！！file.raw就是后端需要的file格式的图片

    OnChange(file, fileList) {const isType = file.type === "image/jpeg" || "image/png";const isLt5M = file.size / 1024 / 1024 < 5;if (!isType) {this.$message.error("上传图片只能是 JPG 格式!");fileList.pop();}if (!isLt5M) {this.$message.error("上传图片大小不能超过 5MB!");fileList.pop();}this.formInline.files.push(file.raw);},

4.上传多张图片并且携带额外参数

注意！！这边如果要传数组，需要先转换为json格式再发给后端

        async setCompanySubmit() {let formData = new FormData(); //  用FormData存放上传文件this.formInline.files.forEach((file, index) => {formData.append('files', file);});let { name, tel, truename, id } = this.formInline;formData.append('name', name);formData.append('tel', tel);formData.append('truename', truename);formData.append('id', id);const res = await Api_setCompany(formData);if (res.code == 200) {this.$message.success('成功！！！');this.unitDialogVisible = false;this.fileImgList = [];this.$refs.uploadCompanyRef.clearFiles();}}

上传参数如下，有多个files文件 

5.完整代码（仅作参考，需要根据实际情况修改）

<template><div><el-uploadaction="#"list-type="picture-card"multiple:on-remove="handleRemove":on-change="OnChange":file-list="fileImgList":auto-upload="false"ref="uploadCompanyRef"><i class="el-icon-plus"></i><div class="el-upload__tip" slot="tip">只能上传jpg/png文件，最多上传5张且单张图片不超过5M</div></el-upload><el-button type="primary" size="default" @click="setCompanySubmit()">上传</el-button></div>
</template><script>
export default {data() {return {fileImgList: [],formInline: {files: [],name: '',id: 0}};},mounted() {this.query();},methods: {query() {if (files.length > 0) {files.forEach((item) => {this.fileImgList.push({url: process.env.VUE_APP_SERVE + '/files' + item.path,name: item.originalname});var image = new Image();image.crossOrigin = '';image.src = process.env.VUE_APP_SERVE + '/files' + item.path; // 'https://xx.cn' + itemconst that = this;image.onload = function () {const base64 = that.imageToBase64(image); // 图片转base64const file = that.base64ToFile(base64, item.path); // base64转Filethat.formInline.files.push(file);};});}},imageToBase64(img) {var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();var dataURL = canvas.toDataURL('image/jpeg' + ext);return dataURL;},base64ToFile(urlData, fileName) {const arr = urlData.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bytes = atob(arr[1]); // 解码base64let n = bytes.length;const ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });},handleRemove(file) {// 从列表中删除当前的图片var that = this;try {var delname = file.url.split('/');that.formInline.files = that.formInline.files.filter((ele) => {var name = ele.name.split('/');return name[name.length - 1] !== delname[delname.length - 1];});console.log(that.formInline.files);} catch (error) {}},OnChange(file, fileList) {console.log(file, fileList, '多选情况下传参');const isType = file.type === 'image/jpeg' || 'image/png';const isLt5M = file.size / 1024 / 1024 < 5;if (!isType) {this.$message.error('上传图片只能是 JPG 格式!');fileList.pop();}if (!isLt5M) {this.$message.error('上传图片大小不能超过 5MB!');fileList.pop();}this.formInline.files.push(file.raw);},async setCompanySubmit() {let formData = new FormData(); //  用FormData存放上传文件this.formInline.files.forEach((file, index) => {formData.append('files', file);});let { name, tel, truename, id } = this.formInline;formData.append('name', name);formData.append('tel', tel);formData.append('truename', truename);formData.append('id', id);const res = await Api_setCompany(formData);if (res.code == 200) {this.$message.success('成功！！！');this.unitDialogVisible = false;this.fileImgList = [];this.$refs.uploadCompanyRef.clearFiles();}}}
};
</script><style lang="scss" scoped></style>

 6.照片墙效果

文章到此结束，希望对你有所帮助~

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

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

相关文章

【SpringBoot】1 Gitee

【SpringBoot】1 Gitee

本项目 Gitee 地址&#xff1a;https://gitee.com/Lin_DH/system idea中可能装个gitee的插件&#xff0c;这样操作起来比较方便。 1&#xff09;登录 Gitee 官网&#xff08;https://gitee.com/&#xff09;&#xff0c;新建仓库。 2&#xff09;复制新建的 Gitee 仓库地址&am…
阅读更多...
聊一聊知识图谱结合RAG

聊一聊知识图谱结合RAG

因为最近在做一些关于提高公司内部使用的聊天机器人的回答准确率&#xff0c;并且最近微软官方也是开源了一下graphrag的源码&#xff0c;所以想聊一聊这个知识图谱结合rag。 rag在利用私有数据增强大模型回答的领域是一种比较典型的技术&#xff0c;也就是我们提出问题的时候&…
阅读更多...
秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II，合并两个有序链表}

秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II，合并两个有序链表}

文章目录 引言复习堆堆——前K个高频元素个人实现复习实现二参考实现 新作单词搜索个人实现参考实现 分割回文串个人实现参考实现 环形链表II个人实现参考实现 两个有序链表个人实现 总结 引言 又是充满挑战性的一天&#xff0c;继续完成我们的任务吧&#xff01;继续往下刷&a…
阅读更多...
【C++】模板详解

【C++】模板详解

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…
阅读更多...
域内攻击手法——AS-REP Roasting攻击和Kerberoasting攻击

域内攻击手法——AS-REP Roasting攻击和Kerberoasting攻击

一、AS-REP Roasting攻击 1、AS-REP Roasting攻击原理 AS-REP Roasting是一种对用户账户进行离线爆破的攻击方式。但是该攻击方式使用上比较受限&#xff0c;因为其需要用户账户设置不要求Kerberos 预身份验证选项&#xff0c;而该选项默认是没有勾选的。Kerberos 预身份验证…
阅读更多...
基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-发送信息服务处理

基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-发送信息服务处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、因为仿钉钉设计器里发送消息处理是一个服务任务&#xff0c;所以要根据这个服务任务进行处理 2、这里目前只对消息进行处理&#xff0c;就是用websocket的发送方式 输入相应的内容&…
阅读更多...
最新爆火的开源AI项目 | LivePortrait 本地安装教程

最新爆火的开源AI项目 | LivePortrait 本地安装教程

LivePortrait 本地部署教程&#xff0c;强大且开源的可控人像AI视频生成 1&#xff0c;准备工作&#xff0c;本地下载代码并准备环境&#xff0c;运行命令前需安装git 以下操作不要安装在C盘和容量较小的硬盘&#xff0c;可以找个大点的硬盘装哟 2&#xff0c;需要安装FFmp…
阅读更多...
Java-- Stream流

Java-- Stream流

感受stream流 代码 package demo1;import javax.naming.Name; import java.util.ArrayList; import java.util.Arrays; import java.util.List;public class StreamDemo1 {public static void main(String[] args) {ArrayList<String> list1 new ArrayList<>();l…
阅读更多...
基于深度学习算法，支持再学习功能，不断提升系统精准度的智慧地产开源了。

基于深度学习算法，支持再学习功能，不断提升系统精准度的智慧地产开源了。

智慧地产视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。通过计算机视觉和…
阅读更多...
Java | Leetcode Java题解之第279题完全平方数

Java | Leetcode Java题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution {public int numSquares(int n) {if (isPerfectSquare(n)) {return 1;}if (checkAnswer4(n)) {return 4;}for (int i 1; i * i < n; i) {int j n - i * i;if (isPerfectSquare(j)) {return 2;}}return 3;}// 判断是否为…
阅读更多...
Spring Security学习笔记（二）Spring Security认证和鉴权

Spring Security学习笔记（二）Spring Security认证和鉴权

前言&#xff1a;本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 上一篇博客介绍了Spring Security的整体架构&#xff0c;本篇博客要讲的是Spring Security的认证和鉴权两个重要的机制。 UsernamePasswordAuthenticationFilter和BasicAuthenticationFilter是…
阅读更多...
Idea 编译项目报错 java: java.lang.OutOfMemoryError:GC overhead limit exceeded

Idea 编译项目报错 java: java.lang.OutOfMemoryError:GC overhead limit exceeded

报错 java: java.lang.OutOfMemoryError: WrappedJavaFileObject[org.jetbrains.jps.javac.InputFileObjectpos13979: GC overhead limit exceeded解决 默认是700M&#xff0c;有的时候项目引入的依赖包比较大&#xff0c;可能超过了700M,需要扩大&#xff0c;根据实际情况设…
阅读更多...
Dockerfile指令详解和Docker操作命令

Dockerfile指令详解和Docker操作命令

1.容器的特点&#xff1a;1&#xff09;自包含&#xff08;包括应用程序及其运行环境&#xff09;&#xff1b;2&#xff09;可移植&#xff1b;3&#xff09;相互隔离&#xff1b;4&#xff09;轻量级。 2.docker成为容器的事实标准在于&#xff1a;1&#xff09;在运行环境上…
阅读更多...
开局一个启动器：从零开始入坑ComfyUI

开局一个启动器：从零开始入坑ComfyUI

前几天刷某乎的时候看到了一位大佬写的好文&#xff0c;可图 IP-Adapter 模型已开源&#xff0c;更多玩法&#xff0c;更强生态&#xff01; - 知乎 (zhihu.com) 久闻ComfyUI大名&#xff0c;决定试一下。这次打算不走寻常路&#xff0c;不下载现成的一键包了&#xff0c;而是…
阅读更多...
ESP32和mDNS学习

ESP32和mDNS学习

目录 mDNS的作用mDNS涉及到的标准文件组播地址IPv4 多播地址IPv6 多播地址预先定义好的组播地址 mDNS调试工具例程mDNS如何开发和使用注册服务查询服务 mDNS的作用 mDNS 是一种组播 UDP 服务&#xff0c;用来提供本地网络服务和主机发现。 你要和设备通信&#xff0c;需要记住…
阅读更多...
【计算机网络】静态路由实验

【计算机网络】静态路由实验

一&#xff1a;实验目的 1&#xff1a;掌握通过静态路由方法实现网络的连通性。 二&#xff1a;实验仪器设备及软件 硬件&#xff1a;RCMS-C服务器、网线、Windows 2019/2003操作系统的计算机等。 软件&#xff1a;记事本、WireShark、Chrome浏览器等。 三&#xff1a;实验方…
阅读更多...
Spark实时（二）：StructuredStreaming编程模型

Spark实时（二）：StructuredStreaming编程模型

文章目录 StructuredStreaming编程模型 一、基础语义 二、事件时间和延迟数据 三、​​​​​​​容错语义 StructuredStreaming编程模型 一、基础语义 Structured Streaming处理实时数据思想是将实时数据看成一张没有边界的表，数据源源不断的追加到这张表中，这可以让我…
阅读更多...
实时捕获数据库变更

实时捕获数据库变更

1.CDC概述 CDC 的全称是 Change Data Capture &#xff0c;在广义的概念上&#xff0c;只要能捕获数据变更的技术&#xff0c;我们都可以称为 CDC 。我们目前通常描述的CDC 技术主要面向数据库的变更&#xff0c;是一种用于捕获数据库中数据变更的技术&#xff0c;CDC 技术应用…
阅读更多...
web网站组成

web网站组成

web网站由四部分组成&#xff1a;浏览器 前端服务器 后端服务器 数据库服务器 流程&#xff1a; 1.浏览器输入网站后&#xff0c;向前端服务器发送请求&#xff0c;前端服务器响应&#xff0c;静态的数据给浏览器。 2.前端代码中script中有url,这个是向后台发送请求的网…
阅读更多...
Windows下帆软BI（finebi）单机部署移植（Tomcat）攻略

Windows下帆软BI（finebi）单机部署移植（Tomcat）攻略

一、基础环境 操作系统&#xff1a;Windows 10 64bit 帆软BI 版本&#xff1a;V9.0/V10.0 HTTP工具&#xff1a;Tomcat 外置数据库&#xff1a;Oracle 11g 实验内容&#xff1a;将已经部署好的帆软BI从一台电脑移植到另一台电脑 二、前期准备 1、做好外置数据库移植&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023