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
繁體地址,請注明出處:http://hk.pswp.cn/web/81939.shtml
英文地址,請注明出處:http://en.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 > …