vue 项目 upload上传图片 并实现拖拽排序

最新推荐文章于 2024-02-22 16:36:38 发布
最新推荐文章于 2024-02-22 16:36:38 发布
阅读量2.8k 收藏 13
点赞数
文章标签： upload vue 拖拽排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38372917/article/details/106384515
版权

upload 上传图片并实现拖拽功能

1、npm i -S vuedraggable

2、//页面引入 

import draggable from "vuedraggable"

components: {
     draggable
}

3、

4、拖拽的事件就是update 

datadragEnd (evt) {

     evt.preventDefault();

     //file-list 就是可展现的image 的数组

 },

爱拉比
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片上传+拖动排序（vue2+elementUI+vuedraggable）
12-24
vue2+elementUI+vuedraggable图片上传后可拖曳排序，可放大查看原图和删除图片。拖曳图片改变图片排序。
vue+draggable+el-upload上传图片拖拽重排方法
一个超爱喝可乐的web前端攻城狮
01-25 717
vue+draggable+el-upload上传图片拖拽重排方法
vue图片批量上传，支持拖拽排序
qq_42431718的博客
11-09 1025
1，ui用的是elementui 需要安装 2，draggable插件，支持拓展排序 3，接口做了处理，可以显示上传进度 //上传图片，上传视频 export function uploadFile (formData, config = Function) { return axios.post('https:xxxxurl', formData, { onUploadProgress: progressEvent => { var complete = pr
el-upload组件实现上传拖拽排序图片顺序
最新发布
a99101的博客
02-22 537
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。官方文档 https://github.com/SortableJS/Sortable。中文文档 https://www.itxst.com/sortablejs。之前是使用vuedraggable完成了一次上传拖拽的使用。
vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能
yueye_wu的博客
12-06 952
【代码】vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能。
vue实现图片拖动排序并可上传图片
qq_42740298的博客
05-04 721
vue实现图片拖动排序并可上传图片
vue_upload图片上传支持拖拽
10-26
vue_upload图片上传支持拖拽，vue_upload图片上传支持拖
Vue实现图片上传支持拖拽排序
qq_22082797的博客
12-12 485
动态上传banner图片且支持拖拽排序。
vue 拖拽 排序
小羽向前跑
05-28 1756
最终效果 组件代码 <template> <!-- 拖拽交换位置效果 --> <transition-group tag="div" class="container"> <!-- 循环出三个颜色不同的div --> <div class="item" v-for="(item,index) ...
vue多图上传 拖拽排序
sinat_36017053的博客
12-18 509
<template> <div> <div class='dragplace'> <draggable class='dragplace' v-model="attachmentList" :options="{animation: 60,}" :move="getdata" @update="datadragEnd"> <div class='bg' v-for="(child,index) in attachmentList"
VUE element-ui 图片上传组件支持拖拽排序
Feify博客
12-15 2004
List item 引用组件 <template slot="textForm" slot-scope="scope"> <div> <Upload :max="4" :value="active" v-model="active" > &.
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE 实现element upload上传图片到阿里云
10-14
主要介绍了VUE 实现element upload上传图片到阿里云，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目实现图片上传功能
12-29
本文实例为大家分享了vue实现图片上传功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </...
ant-design-vue a-upload 多图上传并拖拽排序
周18的碎碎念
03-02 8155
说下思路，ant自己的a-upload组件，不好套拖拽，因为我们需要拖拽的是fileList，所以我就把组件自己的fileList搞成空了，自己写了一个‘fileList’，这样我们用数据自己循环出来的filelist就可以进行很多操作了。 1.我是把a-upload写成了一个组件， 在组件里用了vue-draggable进行拖拽 先安装 npm install vuedraggable 新建组件...
React Antd4.x Upload实现图片上传后拖拽换顺序功能
Sun_小杰杰哇
12-14 1868
功能说明 做项目使用React Antd4.x Upload上传图片，实现批量上传。 后期项目迭代更新，要求拖拽图片调整图片顺序。 框架不支持，自己借助包写了一个上传且可以拖拽图片换位置的功能。 下面是具体步骤 功能实现 安装“array-move” $ npm i array-move 安装“react-sortable-hoc" $ npm install react-sortable-hoc --save ...
vuedraggable + el-upload + videoPlayer 实现自由拖拽
qq_45055165的博客
03-08 1325
一 、需求: 基于 vue cli 可以上传视频(可以观看)或者图片(可以预览) -进行自由拖拽-或者删除功能 二 、技术: vuedraggable + el-upload + videoPlayer 三、步骤: 1 安装 npm i -S vuedraggable 2 页面引入: import { API_pos_screen_update } from '@/api/settings/pos-screen' import vuedraggable from 'vuedraggable
Linux基础IO
Hedenghui777的博客
11-09 269
文章目录前言一、回顾标准库的IO接口二、系统调用IO接口的学习1. int open(char* filename,int flag,mode_t mode)2.ssize_t write(int fd,char *buf,size_t count);3.ssize_t read(int fd,char *buf,size_t len);4.off_t lseek(int fd,off_t offset,int whence)5.int close(int fd);---通过文件描述符关闭文件，释放资源；总
vue中使用vuedraggable实现图片的拖拽排序以及预览等功能
qq_36660135的博客
05-09 2163
【代码】vue中使用vuedraggable实现图片的拖拽排序以及预览等功能。
ant design vue2 实现图片上传并拖拽位置
04-24
可以通过使用Ant Design Vue的Upload组件和Dragger组件实现图片上传并拖拽位置。具体代码示例如下： ``` <template> <div> <a-upload :action="uploadUrl" :before-upload="beforeUpload" :on-success="onSuccess" > <a-icon type="upload" /> Click to Upload </a-upload> <a-dragger :action="uploadUrl" :before-upload="beforeUpload" :on-success="onSuccess" > <p class="ant-upload-drag-icon"> <a-icon type="inbox" /> </p> <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload.</p> </a-dragger> <img :src="imageUrl" width="200" height="200" style="margin-top: 20px;"> </div> </template> <script> export default { data() { return { imageUrl: '', uploadUrl: 'your-upload-server-url' }; }, methods: { beforeUpload(file) { // 在这里可以对文件进行校验，例如大小、类型等 console.log('before upload', file); }, onSuccess(response, file, fileList) { // 上传成功后的回调函数 console.log('upload success', response, file, fileList); this.imageUrl = URL.createObjectURL(file.raw); } } }; </script> ``` 在这段代码中，我们使用了`a-upload`组件和`a-dragger`组件来展示图片上传的界面。`a-upload`组件可以通过单击上传按钮或者拖拽到上传区域来完成文件上传；`a-dragger`组件则是将上传区域改为了一个拖拽框，视频等其他多格式的文件也能方便的拖拽上传。同时，我们在`beforeUpload`函数中可以对文件进行校验，并在`onSuccess`函数中处理上传成功后的事件。最后设置`imageUrl`的值为上传图片的预览链接即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值