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.mzph.cn/news/875309.shtml

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

相关文章

第4章 .NET 8.0 ASP.NET Core图书管理系统 :项目布局

第1章 框架学习的基石与实战策略 第2章 大话ASP.NET Core 入门 第3章 创建最小&#xff08;Minimal APIs&#xff09;API应用程序 第4章 .NET 8.0 ASP.NET Core图书管理系统 &#xff1a;项目布局 在第3章中&#xff0c;我们利用ASP.NET Core的“空”模板创建了BookQueryS…

lua 游戏架构 之 游戏 AI (五)ai_autofight_find_way

这段Lua脚本定义了一个名为 ai_autofight_find_way 的类&#xff0c;继承自 ai_base 类。 lua 游戏架构 之 游戏 AI &#xff08;一&#xff09;ai_base-CSDN博客文章浏览阅读238次。定义了一套接口和属性&#xff0c;可以基于这个基础类派生出具有特定行为的AI组件。例如&…

【Python】成功解决conda创建虚拟环境时出现的CondaHTTPError: HTTP 000 CONNECTION FAILED错误

【Python】成功解决conda创建虚拟环境时出现的CondaHTTPError: HTTP 000 CONNECTION FAILED错误 &#x1f308; 欢迎莅临我的个人主页&#x1f448;这里是我深耕Python编程、机器学习和自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;并乐于分享知识与经验的小天地&a…

20240724----idea的Java环境卸载与安装

1.删除旧有的jdk https://blog.csdn.net/weixin_42168713/article/details/112162099 &#xff08;补充&#xff1a;我把用户变量和java有关的都删了&#xff09; 2.下载新的jdk百度网盘链接 链接&#xff1a;https://pan.baidu.com/s/1gkuLoxBuRAtIB1IzUTmfyQ 提取码&#xf…

【Maven】java: 模块循环不支持注解处理。请确保将循环……中的所有模块排除在注解处理之外

问题背景 java: 模块循环不支持注解处理。请确保将循环 [apm-agent-core,java-agent-network,java-agent-datacarrier,java-agent-util] 中的所有模块排除在注解处理之外 问题排查 参考&#xff1a;Java依赖比较多的时候就会出现这个依赖报错&#xff1a;Java&#xff1a;模块…

Docker 部署常用中间件(redis,rabbitMQ,mysql8,es,kibana,nginx等)亲测成功~~~

Docker 部署常用中间件 在日常开发中必要的环境&#xff0c;大多数都是单点后续持续更新集群模式~~~ docker 安装reids docker pull redis:7.2.5 编辑redis.conf # 绑定地址&#xff0c;默认只允许本机访问 # bind 192.168.1.100 10.0.0.1 # bind 127.0.0.1 ::1 bind 0.0…

Golang_交替打印ABC\奇偶数\1-10\字母(并发编程)

一、常见题目 1.1 三个协程交替打印ABC 建立三个线程A、B、C&#xff0c;A线程打印10次字母A&#xff0c;B线程打印10次字母B,C线程打印10次字母C&#xff0c;但是要求三个线程同时运行&#xff0c;并且实现交替打印&#xff0c;即按照ABCABCABC的顺序打印。 package main i…

Vue中el的两种写法

大家好我是前端寄术区博主PleaSure乐事。今天了解到了Vue当中有关el的两种写法&#xff0c;记录下来与大家分享&#xff0c;希望对大家有所帮助。 方法一 解释 第一种方法我们直接用new创建并初始化一个新的 Vue 实例&#xff0c;并定义了 Vue 实例的数据对象&#xff0c;在给…

mac大文件清理软件哪个好 mac大文件怎么清理 苹果电脑清理软件推荐免费

mac采用固态硬盘技术&#xff0c;数据存储和系统响应速度优势明显&#xff0c;但是mac的内存弊端同样体现在其固态硬盘的技术&#xff0c;导致用户无法通过机械硬盘进行扩充内存。而我们日常使用电脑会产生大量系统垃圾、用户缓存等文件&#xff0c;平时下载的电影和大型游戏安…

前端:Vue学习 - 购物车项目

前端&#xff1a;Vue学习 - 购物车项目 1. json-server&#xff0c;生成后端接口2. 购物车项目 - 实现效果3. 参考代码 - Vuex 1. json-server&#xff0c;生成后端接口 全局安装json-server&#xff0c;json-server官网为&#xff1a;json-server npm install json-server -…

基于毫米波生物感知雷达+STM32设计的独居老人居家监护系统(微信小程序)(192)

基于毫米波生物感知雷达设计的独居老人居家监护系统(微信小程序)(192) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】60G毫米波生物感知雷达原理【3】ESP8266模块配置【4】供电方式1.3 项目开发背景【1】选题的意义…

增材制造与智能制造关系

在撰写的增材制造技术与装备书籍中有着明确的描述&#xff0c;增材制造是智能制造的典型范例&#xff0c;是智能制造“类”的实例化过程。这种借助于计算机编程面向对象思想的解释可以更全面的理解增材制造和智能制造的关系。增材制造实例具备了智能制造类的属性&#xff0c;智…

钉钉 ai卡片 stream模式联调

sdk连接 新建卡片模板下载node.js sdkconfig.json 配置应用信息 启动项目npm i npm run build npm run start连接成功 获取卡片回调 注册卡片回调事件调用https://api.dingtalk.com/v1.0/card/instances 创建卡片实例&#xff0c;返回实例Id //参数结构 {"cardTempla…

【STM32】当按键具有上拉电阻时GPIO应该配置什么模式?怎么用按键去控制LED翻转?

当按键具有上拉电阻时&#xff0c;可以通过正确配置STM32的GPIO端口和编写相应的控制代码来实现按键控制LED灯的功能。具体来说&#xff0c;需要配置按键所连接的GPIO端口为输入模式&#xff0c;并启用内部上拉电阻&#xff0c;这样在按键未操作时该端口保持高电平状态&#xf…

Redis 7.x 系列【30】集群管理命令

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 集群信息2.1 CLUSTER INFO 3. 节点管理3.1 CLUSTER MYID3.2 CLUSTER NODES3…

LC617-合并二叉树

文章目录 1 题目描述2 思路优化代码完整输入输出 参考 1 题目描述 https://leetcode.cn/problems/merge-two-binary-trees/description/ 给你两棵二叉树&#xff1a; root1 和 root2 。 将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另…

mysql设置root密码

mysql设置root密码 在MySQL中设置root用户的密码可以通过几个简单的步骤完成。以下是在已经安装并启动MySQL的情况下如何设置root密码的方法: 1. 登录到MySQL服务器 首先,使用以下命令以root身份登录到MySQL服务器。系统会提示你输入密码,如果是第一次登录或者还没有设置…

sql 常用建表脚本

建表 CREATE TABLE your_table (id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(255),remark remark TEXT,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); 已有表添加字段 ALTER TABLE y…

数据结构排序合集(笔记)

目录 一.插入排序与希尔排序 二.选择排序与堆排序 三.冒泡排序和快速排序 四.归并排序 五.计数排序 一.插入排序与希尔排序 时间复杂度空间复杂度稳定性插入排序O&#xff08;N^2&#xff09;O(1)稳定希尔排序O(N^1.3)O(1)不稳定 插入排序&#xff1a; 希尔排序&#xff…

报红:找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)

接上篇 在上篇介绍了使用 unplugin-auto-import 和 unplugin-vue-components 配置完成后&#xff0c;项目可以正常运行&#xff0c;并且页面也正常显示&#xff0c;但vscode里就是报红 这个报红可能是由于 ts 发出的&#xff0c;也可能是由于 eslint 发出的 具体可以用鼠标…