elementui图片上传前压缩,
这篇文章主要为大家详细介绍了使用元素vuedraggable实现图片上传拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了用元素vuedraggable实现图片上传拖拽排序的具体代码，供大家参考，具体内容如下
模板
div class="全部上传"
div class=clearfix
div class=wrap
可拖动的
v-model=值
动画=400
class=clearfix
过渡组
div class=左中间 v-for=(item，index) in value :key=item.id
img :src=item.url alt=
div class=内容包装
div class=content middleCenter
I class= El-icon-zoom-in @ click= show img(item .URL)/I
I class= El-icon-delete @ click= delImg(item，index)/i
/div
/div
/div
/过渡-组
div slot= footer style= float:left
埃尔-上传
换行
list-type=图片卡
:action=imgUploadUrl
:show-file-list=false
：限制="最大"
:on-progress= handlePictureCardPreview
:on-exceed=onExceed
:disabled="disabled "
:on-change=onChange
:file-list=fileList
:multiple=true
:on-success=handleSuccess
v-if=isUploadBtn
I slot= default :class=上传加载？El-icon-loading : El-icon-plus /I
/El-上传
/div
/可拖动
/div
/div
el-dialog title=查看图片：visible.sync=dialogVisible
img width= 100% :src= dialogImageUrl alt=
/el-dialog
/div
/模板
脚本
从" vuedraggable "导入可拖动的
从" @/API/上传"导入{imgUpload}
从" @/utils/auth "导入{MathRandom}
从" fs "导入{承诺}
导出默认值{
名称："上传",
data () {
返回{
dialogImageUrl:" "，
上传加载：假，
dialogVisible: false，
禁用：假，
文件列表：[],
imgUploadUrl:imgUpload()，
arrs:[]
}
},
道具：{
值：{
type: ()=[]，
默认(){
return []
}
},
最大：{
类型：[数字，字符串],
默认值：9
},
已禁用：{
类型：布尔型，
默认值：错误
}
},
型号：{
事件："赠品"
},
计算值：{
isUploadBtn(){
返回this.value.lengththis.max
},
imgArr(){
返回此值
}
},
已安装(){
this.value=[]
//this.fileList=[]
const unwatch=this .$watch(value ，function(newValue，oldValue){
console.log(12312323)
this.fileList=newValue
取消观看()
});
},
方法：{
go () {
这个$emit(giveActive ，这个。值)；
},
显示(url){
this.dialogImageUrl=url
this.dialogVisible=true
},
交付（项目，索引){
这个. $确认(此操作将永久删除该图片，是否继续？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(()={
this.value.splice(索引，1)
this.fileList.splice(索引，1)
this.go()
}).catch(()={
});
},
onChange(文件，文件列表){
this.fileList=fileList
},
handlePictureCardPreview(文件){
this.uploadLoading=true
},
onExceed(文件、文件列表、道具){
这个消息({
消息：`消息超出最大上传数量，最多可上传${this.max}张图片`,
类型："错误"
})
},
成功处理(响应、文件、文件列表){
this.uploadLoading=false
this.urlList(响应)
},
urlList(res){
const obj={
id:MathRandom()，
url:res.data.data，
状态："成功",
uid:MathRandom()
}
if(this.value.lengththis.max){
this.value=[.this.value，obj]
this.go()
}
}
}
}
/脚本
样式lang=scss 范围。allUpload{。左侧{
浮动：左；
宽度：148像素
身高：148像素
边框-半径：6px
边框：1px实心# c0ccda
边距：0 20px 20px 0
溢出：隐藏；
位置：相对；
光标：指针；
：悬停{。内容包装{
显示：块；
}
}。内容包装{
显示：块；
}
img{
最大宽度：100%;
最大高度：100%;
对象适合：封面；
}。内容包装{
显示：无；
位置：绝对；
z指数：99999999;
宽度：100%;
身高：100%;
背景：rgba($color: #000000，$ alpha:0.4)；内容{
宽度：100%;
身高：100%;
我{
颜色：# fff
字体大小：18px
：第n种类型(1){
右边距：10px
}
：第n种类型(2){
左边距：10px
}
}
}
}
}。换行{
浮动：左；
}
}
/风格
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。