element上传文件多选 实现文件排序

上传文件多选排序

只上代码 不多逼逼

这是el-elment 的文件上传

 <el-uploadaction="#"list-type="picture-card"ref="upload":accept="accept":on-change="onUploadChange":file-list="fileList":http-request="preservation":before-upload="beforeAvatarUpload":show-file-list="false":on-remove="onRemove":multiple="multiple":disabled="disabled":auto-upload="true"><i slot="default" class="el-icon-plus"></i></el-upload>

上传代码

data() {return {uploadQueue: [],uploading: false,loading: null}},async preservation() {try {if (!this.loading) {this.loading = this.$loading({lock: true,text: '疯狂上传中~',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});}let imgUrl = this.$refs['upload'].uploadFilesif (imgUrl && imgUrl.length)this.uploadQueue.push(imgUrl[imgUrl.length - 1])if (!this.uploading) await this.processQueue()} catch (e) {if (this.loading) this.loading.close()this.uploadQueue = []this.uploading = false}},async processQueue() {if (!this.uploadQueue.length) {this.uploading = falsethis.uploading.close()return}this.uploading = true;let file = this.uploadQueue.shift()if (this.iSimgName) {this.imgName.push(file.name.split('.')[0])}await OSS.ossPut(file, this.fileName).then(res => {this.value.push(res.url)this.$emit('UploadSucceeded', res.url)})// this.loading.close()// this.$refs["upload"].clearFiles()// 继续处理下一个await this.processQueue();},

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

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

相关文章

.NET 查找 DLL 的路径顺序

在 C# 中&#xff0c;[DllImport("SgCamWrapper.dll")] 这行代码表明它会在运行时从当前可执行文件的搜索路径中查找 SgCamWrapper.dll。具体搜索顺序如下&#xff08;按优先级&#xff09;&#xff1a; ✅ .NET 查找 DLL 的路径顺序&#xff1a; 应用程序启动目录&a…

低代码——表单生成器以form-generator为例

主要执行流程说明&#xff1a; 初始化阶段 &#xff1a; 接收表单配置对象formConf深拷贝配置&#xff0c;初始化表单数据和验证规则处理每个表单组件的默认值和特殊配置&#xff08;如文件上传&#xff09; 渲染阶段 &#xff1a; 通过render函数创建el-form根组件递归渲染表…

自定义载板RK3588HDMI输入配置完整解决方案

Orange Pi 5 Plus HDMI输入配置完整解决方案 &#x1f4cb; 项目概述 本文档记录了Orange Pi 5 Plus HDMI1接口配置问题的完整分析和解决过程。从初始的"disconnected"状态问题&#xff0c;到最终实现HDMI输入功能的全过程技术分析。 &#x1f3af; 问题描述 初始…

SAAS架构设计2-流程图-用户与租户之间对应关系图

在SAAS&#xff08;Software as a Service&#xff0c;软件即服务&#xff09;结构中&#xff0c;用户与租户之间的关系可以通过一对一和多对多两种方式来定义。这两种关系模式各自有着不同的应用场景和特点。 用户和租户的关系&#xff08;一对一&#xff09; 一对一关系 在这…

Spring Boot微服务架构(八):开发之初就引入APM工具监控

使用 APM&#xff08;Application Performance Management&#xff09;工具监控 Spring Boot 应用&#xff0c;可以帮助开发者实时追踪性能瓶颈、分析调用链路、监控资源使用情况&#xff0c;并快速定位故障。以下是详细的步骤和常用工具的选择指南&#xff1a; ​​一、常用 A…

Python 如何让自动驾驶的“眼睛”和“大脑”真正融合?——传感器数据融合的关键技术解析

Python 如何让自动驾驶的“眼睛”和“大脑”真正融合?——传感器数据融合的关键技术解析 自动驾驶技术从来都不是“单兵作战”。如果你细看一辆自动驾驶汽车,它其实是一个传感器的集合体:摄像头、激光雷达(LiDAR)、毫米波雷达、超声波传感器、GPS……这些传感器各自发挥作…

《软件工程》第 12 章 - 软件测试

软件测试是确保软件质量的关键环节&#xff0c;它通过执行程序来发现错误&#xff0c;验证软件是否满足需求。本章将依据目录&#xff0c;结合 Java 代码示例、可视化图表&#xff0c;深入讲解软件测试的概念、过程、方法及实践。 12.1 软件测试的概念 12.1.1 软件测试的任务 …

面试题 08.08. 有重复字符串的排列组合【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 面试题 08.08. 有重复字符串的排列组合 一、题目描述 有重复字符串的排列组合。编写一种方法&#xff0c;计算某字符串的所有排列组合。 二、测试用例 示例 1&#xff1a; 输入&#…

【Linux】关于权限的理解

目录 一、Linux用户的分类 1.Linux下的两种用户 2.两种用户提示符的区别 3.用户的切换方法 二、Linux的权限管理 1.文件访问者分类 2.常见文件类型 3.文件访问权限 4.权限检查逻辑 5.文件权限的表示方式 三、与文件访问权限相关的设置方法 1.前提&#xff1a; 2.如…

前端antd,后端fastapi,解决文件上传

一、技术架构概述 前端框架&#xff1a;React Ant Design 5.x 使用antd的Upload组件&#xff08;支持拖拽/多文件/分片&#xff09; 后端框架&#xff1a;Python FastAPI 利用UploadFile类处理文件流 传输协议&#xff1a;HTTP FormData&#xff08;兼容性强&#xff09; 二…

⭐️⭐️⭐️ 模拟题及答案 ⭐️⭐️⭐️ 大模型Clouder认证:RAG应用构建及优化

考试注意事项: 一、单选题(21题) 检索增强生成(RAG)的核心技术结合了什么? A. 图像识别与自然语言处理 B. 信息检索与文本生成 C. 语音识别与知识图谱 D. 数据挖掘与机器学习 RAG技术中,“建立索引”步骤不包括以下哪项操作? A. 将文档解析为纯文本 B. 文本片段分割(…

为什么建立 TCP 连接时,初始序列号不固定?

主要原因有两个方面&#xff1a; 很大程度上避免历史报文被下一个相同四元组的 TCP 连接接收问题&#xff08;主要方面&#xff09;防止黑客伪造相同序列号的 TCP 报文被接收 接下来&#xff0c;详细说说第一点 假设每次建立 TCP 连接时&#xff0c;客户端和服务端的初始序列…

VScode-使用技巧-持续更新

一、Visual Studio Code - MACOS版本 复制当前行 shiftoption方向键⬇️ 同时复制多行 shiftoption 批量替换换行 在查找和替换面板中&#xff0c;你会看到一个 .∗ 图标&#xff08;表示启用正则表达式&#xff09;。确保这个选项被选中&#xff0c;因为我们需要使用正则…

【瑶池数据库训练营及解决方案本周精选(探索PolarDB,参与RDS迁移、连接训练营)】

一、训练营 数据库迁移训练营 自建数据库运维难&#xff1f;本次训练营教您迁移至云数据库 RDS&#xff0c;高可用架构跨区容灾&#xff0c;降本增效&#xff01;模拟教程 实战演练&#xff0c;零基础也能上手。 &#xff08;一&#xff09;开营时间 2025年4月8日-6月2日16…

Xamarin劝退之踩坑笔记

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

使用ray扩展python应用之流式处理应用

流式处理就是数据一来&#xff0c;咱们就得赶紧处理&#xff0c;不能攒批再算。这里的实时不是指瞬间完成&#xff0c;而是要在数据产生的那一刻&#xff0c;或者非常接近那个时间点&#xff0c;就做出响应。这种处理方式&#xff0c;我们称之为流式处理。 流式处理的应用场景…

火狐安装自动录制表单教程——仙盟自动化运营大衍灵机——仙盟创梦IDE

打开火狐插件页面 安装完成 使用 功能 录制浏览器操作 录入地址 开始操作 录制完成 在当今快速发展的软件开发生态中&#xff0c;自动化测试已从一种新兴技术手段&#xff0c;转变为保障软件质量与开发效率不可或缺的关键环节。其重要性体现在多个维度&#xff0c;同时&#x…

小程序 - 视图与逻辑

个人简介 👨‍💻‍个人主页: 魔术师 📖学习方向: 主攻前端方向,正逐渐往全栈发展 🚴个人状态: 研发工程师,现效力于政务服务网事业 🇨🇳人生格言: “心有多大,舞台就有多大。” 📚推荐学习: 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒T…

【LLM应用开发】上下文记忆的解决方案(主流全面)

一、前言 上下文记忆&#xff08;Contextual Memory&#xff09;解决方案的作用&#xff1a; 提升 AI&#xff08;尤其是大语言模型&#xff0c;LLM&#xff09;的对话连贯性和个性化。 本文将介绍几个主流的实现方式。 二、&#x1f9e0; 什么是上下文记忆&#xff1f; 在对…

C/C++ 面试复习笔记(2)

C语言如何实现快速排序算法&#xff1f; 答案&#xff1a;快排是一种分治算法&#xff0c;选择一个基准元素&#xff0c;将数据划分成两部分&#xff0c;然后递归排序 补充&#xff1a; void quick_sort(int arr[], int start, int end) {//判断是否需要排序if (start > …