当前位置: 首页 > backend >正文

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.xdnf.cn/news/10130.html

相关文章:

  • 指纹识别+精准化POC攻击
  • 正点原子Z20 ZYNQ ​​​开发板​​发布!板载FMC LPC、LVDS LCD和WIFI蓝牙等接口,资料丰富!
  • It is recommended to disable TLS 1.1 and replace it with TLS 1.2 or higher.修复方案
  • LearnOpenGL-笔记-其十一
  • 突破DIFY沙箱限制,高效处理大文件
  • 人工智能在智能金融中的创新应用与未来趋势
  • 【面试】喜茶Java面试题目
  • 数学建模之最短路径问题
  • Spring Boot中使用@JsonAnyGetter和@JsonAnySetter处理动态JSON属性
  • Linux中的shell脚本
  • 基于Vite的前端自动化部署方案
  • (一)微服务(垂直AP/分布式缓存/装饰器Pattern)
  • Bootstrap项目 - 个人作品与成就展示网站
  • 【数据集】高分辨率(1 km)月尺度中国气候(降水+最高/低温)数据集(1952–2019)
  • 【目标检测】【ICCV 2021】条件式DETR实现快速训练收敛
  • Flume 自定义拦截器开发实战:添加时间戳与 JSON 处理
  • AI感知与行动:考拉悠然发布空间智能世界模型,让AI走进物理世界
  • AcroForm 表单:动态字段值调整及避免使用 “event.value“
  • 中国城市间地理距离矩阵(2024)
  • 历年南京理工大学计算机保研上机真题
  • linux常用命令笔记
  • 进程生命周期
  • Java八股-数据类型转换有哪些?类型互转会有什么问题?为什么用bigDecimal 不用double ?自动装箱和拆箱?包装类?
  • 简单说一说Modern ABAP这个概念
  • ZC-OFDM雷达通信一体化减小PAPR——直接限幅法
  • CSS级联样式(基础知识)备忘录
  • C# 结合PaddleOCRSharp搭建Http网络服务
  • MySQL大表结构变更利器:pt-online-schema-change原理与实战指南
  • ⼤模型驱动的DeepInsight Copilot在蚂蚁的技术实践
  • LINUX530 rsync定时同步 环境配置