vue+draggable+el-upload上传图片拖拽重排方法

vue+draggable+el-upload上传图片拖拽重排方法

在这里插入图片描述
1.html

<el-row><el-col><el-form-item label="添加视频/图片" prop="device_id"><div class="image-upload"><draggable v-model="fileList" @update="dataDragEnd"><transition-group class="uploader"><div v-for="(item, index) in fileList" :key="item.url" class="upload-list"><img v-if="item.url" style="width:146px;height: 146px" :src="item.url" /><div class="icon-container"><span v-if="item.url" @click="handlePreviewNew(index)"><i class="el-icon-zoom-in"></i></span><span v-if="item.url" @click="handleRemoveNew(item, index)"><i class="el-icon-delete"></i></span></div></div></transition-group></draggable><el-upload name="image" ref="uploadFile" class="upload-demo" action="#" multiple :http-request="uolpadMorePic" :file-list="fileList" list-type="picture-card"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload></div></el-form-item></el-col><ImageViewer v-if="previewVisible" :on-close="closeViewer" :url-list="[previewPath]" style="z-index: 9999;" />
</el-row>

2.js

import draggable from 'vuedraggable';
import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue';
components: { draggable, ImageViewer },
//拖拽//图片方法function uploadImage(file) {return new Promise(async (resolve, reject) => {const formData = new FormData();formData.append('source', file.file);formData.append('modular', 'sccontrol');const { data } = await uploadsImg(formData);resolve(data);});}const fileList = ref([]);async function uolpadMorePic(file) {const data = await uploadImage(file);fileList.value.push({name: '图片',url: data.url,uid: Math.floor(Math.random() * 100000),});fileList.value.map((item, index) => (item.sortNum = index + 1));Message.success('上传成功');}function handleRemoveNew(file, index) {fileList.value.splice(index, 1);}const previewVisible = ref(false);const previewPath = ref('');function handlePreviewNew(index) {previewPath.value = fileList.value[index].url;previewVisible.value = true;}function closeViewer() {previewVisible.value = false;}function dataDragEnd() {fileList.value.forEach((item, index) => {item.sortNum = index + 1;});fileList.value = fileList.value.filter(item => {return item.url != '';});}

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

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

相关文章

js树形控件zTree使用总结

文章目录 一、zTree简介1.1、zTree的特点1.2、zTree文件介绍 二、zTree的基本使用2.1、zTree的创建2.2、zTree的配置2.3、zTree的数据格式2.3.1、标准数据格式2.3.2、简单数据格式 2.4、zTree的常用方法2.4.1、获取zTree对象2.4.2、增加节点2.4.3、勾选或取消勾选全部节点2.4.4…

ubuntu 添加 sudo 权限

xxxx 不在 sudoers 文件中。此事将被报告。 在Ubuntu中&#xff0c;可以通过将用户添加到sudo组来为其提供sudo&#xff08;超级用户&#xff09;权限。 要添加sudo权限&#xff0c;按照以下步骤操作&#xff1a; 打开终端&#xff08;CtrlAltT&#xff09;。 输入以下命令并…

使用 git rebase 合并多个 commit

首先我们查看一下当前提交历史&#xff1a; atreus-MBP:code (test) $ git log -4 --oneline da3ba01 (HEAD -> test) 3 9d2725f 2 44f23cb 1 61e7d87 (origin/test) merge: Merge branch test of https://gitee.com/atreus1125/code into test我们通过 git rebase -i 61e7…

怎么选专业!!!!

最基础的专业能锻炼你的最核心的技能。至于工作中要用到的知识&#xff0c;在工作中去学习&#xff0c;效果最好。 第二个迷思是&#xff1a;最热门的专业就是最好的专业????。 家长和老师经常会跟孩子们说&#xff0c;你们要想好将来干什么&#xff0c;找个好的专业。有人…

【知识---git中一些常用的命令及其选项】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; Git 提供了许多选项&#xff0c;以满足不同的需求和操作。以下是一些常见的 Git …

视频汇聚/云存储平台EasyCVR级联上级播放后一直发流是什么原因?

可视化云监控平台/安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;同时…

【Web前端实操12】将一个100*100的盒子,变成圆形

将一个100*100的盒子&#xff0c;变成圆形&#xff0c;是一个简单的实操&#xff0c;想要完成这个实操&#xff0c;最关键的是一个知识点&#xff0c;使用 CSS3 border-radius 属性&#xff0c;你可以给任何元素制作 "圆角" border-radius 属性&#xff0c;可以使用…

软考复习之软件工程篇

软件生命周期 问题定义&#xff1a;要示系统分析员与用户进行交流&#xff0c;弄清”用户需要计算机解决什么问题”然后提出关于“系统目标与范围的说明”&#xff0c;提交用户审查和确认 可行性研究&#xff1a;一方面在于把待开发的系统的目标以明确的语言描述出来&#xf…

【Linux】shell外壳和权限

文章目录 shell外壳用户切换权限 shell外壳 什么是shell外壳呢&#xff1f;首先我们应该知道&#xff0c;用户和操作系统内核是不能直接接触的&#xff0c;因为首先操作系统本身就很难去操作&#xff0c;另一方面也是为了操作系统安全考虑&#xff0c;不能让用户直接去操作内核…

JeecgBoot 3.6.1实现Modal对话框,以为审核数据为例

JeecgBoot 3.6.1实现Modal对话框 vue使用的是3.0版本 文章目录 JeecgBoot 3.6.1实现Modal对话框前言一、列表页面关键代码示例二、textAuditModal.vue代码示例三、test.api.ts总结 前言 在工作中&#xff0c;有一个需求&#xff0c;要求&#xff0c;在数据列表页&#xff0c;…

SUBMIT指定用户名错误

1、SUBMIT说明 在ABAP中&#xff0c;SUBMIT关键字用于运行另一个ABAP程序。通过SUBMIT关键字&#xff0c;可以在当前程序内部调用其他程序&#xff0c;而无需关闭当前程序。 SUBMIT语句的一般语法如下&#xff1a; "--------------------斌将军-------------------- SUB…

Java接收curl发出的中文请求无法解析

最近做项目遇到了这种情况&#xff0c;Java接收curl发出的中文请求无法解析&#xff0c;英文请求一切正常&#xff0c;中文请求则对方服务器无法解析&#xff0c;可以猜测是中文导致的编码问题&#xff0c;但是奇怪的是&#xff0c;本地输出json也没有乱码&#xff0c;编解码正…

leetcode:三数之和---双指针

问题&#xff1a; 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复…

深入浅出 diffusion(1):白话 diffusion 原理(无公式)

两个过程前向过程&#xff08;forward process&#xff09;&#xff1a;添加噪声&#xff1b;反向过程&#xff08;reverse process&#xff09;&#xff0c;又称为扩散过程&#xff08;diffusion process&#xff09;&#xff1a;去除噪声&#xff0c;数据样本生成。 过程核心…

云架构(一)

以下的设计模式有利于在构建可靠&#xff0c;可扩展&#xff0c;安全的分布式应用。 每种设计模式都描述了它要解决的问题、注意事项和在微软的例子。大部分设计模式包含了代码例子或者片段&#xff0c;用来展示在微软云上是如何实现的。但是这些设计模式对于其他分布式系统也是…

bean的一生

你曾读spring源码 “不知所云”、“绞尽脑汁”、“不知所措”嘛&#x1f923;&#x1f923;&#x1f923; 那这篇文章可能会对你有所帮助&#xff0c;小编尝试用简单、易懂的例子来模拟spring经典代码&#x1f449;Spring Bean生命周期及扩展点&#xff0c; 让你能够****轻松…

uniapp一些常用api

1、预览文件 viewFile(){ uni.showLoading({ title: 正在打开 }) uni.downloadFile({ url: fileUrl, // 服务器上文件路径 filePath: uni.env.USER_DATA_PATH file…

Linux系统Shell脚本编程之条件语句

一、条件测试 Shell 环境根据命令执行后的返回状态值 " $? " 来判断是否执行成功&#xff0c;当返回值为0时表示成功&#xff0c;否则表示失败或异常&#xff08;非0值&#xff09;。使用专门的测试工具 test 命令&#xff0c;可以对特定条件进行测试&#xff0c;并…

BurpSuite Pro 2023.12.1.2下载与破解-最新版BurpSuite Pro

本文在我的博客地址是&#xff1a;https://h4cker.zip/post/f05ae2e66da503f6383dffe48cdf5bac 上一次BurpSuite的分享还是在2020年 由于CSDN有防盗链&#xff0c;我自己的博客都无法访问这篇博文的图片了 至于为什么再写一次&#xff0c;是因为我看到群里这张图&#xff1a;…

小型洗衣机哪家好?专门洗内衣内裤的小型洗衣机

内衣专用的洗衣机是一种专门设计用于洗涤内衣和贴身衣物的小型洗衣机。相比于普通的大型洗衣机&#xff0c;这样的小型洗衣机在设计和功能上有很大的区别。内衣专用的迷你洗衣机可以有效地保护内衣和贴身衣物的质量和卫生。在传统的洗衣机中&#xff0c;如果经常将内衣裤、袜子…