使用element+vuedraggable实现图片上传拖拽排序
转载声明：
本文为摘录自“csdn博客”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2020-12-11 15:51:50
// 上传组件
<template>
<div class="allUpload">
<div class="clearfix">
<div class="wrap">
<draggable
v-model="value"
forceFallback="true"
animation="400"
class="clearfix"
>
<transition-group>
<div class="left middleCenter" v-for="(item,index) in value" :key="item.id">
<img :src="item.url" alt="">
<div class="content-wrap">
<div class="content middleCenter">
<i class="el-icon-zoom-in" @click="showImg(item.url)" ></i>
<i class="el-icon-delete" @click="delImg(item,index)"></i>
</div>
</div>
</div>
</transition-group>
<div slot="footer" style="float:left">
<el-upload
class="wrap"
list-type="picture-card"
:action="imgUploadUrl"
:show-file-list="false"
:limit="max"
: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="uploadLoading ? 'el-icon-loading' : 'el-icon-plus'"></i>
</el-upload>
</div>
</draggable>
</div>
</div>
<el-dialog title="查看图片" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import {imgUpload} from '@/api/upload'
import {MathRandom} from '@/utils/auth'
export default {
name:'Upload',
data () {
return {
dialogImageUrl: '',
uploadLoading:false,
dialogVisible: false,
disabled: false,
fileList:[],
imgUploadUrl:imgUpload(),
}
},
props: {
value: {
type: () => [],
default () {
return []
}
},
max:{
type:[Number,String],
default:9
},
disabled:{
type:Boolean,
default:false
}
},
model:{
event: 'giveActive'
},
computed:{
isUploadBtn(){
return this.value.length<this.max
}
},
mounted(){
// 监听一次value,只执行一次,用于回显图片,
const unwatch = this.$watch('value', function(newValue, oldValue){
this.fileList = newValue
unwatch()
});
},
methods: {
go () {
this.$emit('giveActive', this.value);
},
showImg(url){
this.dialogImageUrl = url
this.dialogVisible = true
},
delImg(item,index){
this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.value.splice(index,1)
this.fileList.splice(index,1)
this.go()
}).catch(() => {
});
},
onChange(file,fileList){
this.fileList = fileList
},
handlePictureCardPreview(file) {
this.uploadLoading = true
},
onExceed(files, fileList,props){
this.$message({
message:`超出最大上传数量,最多可上传${this.max}张图片`,
type:'error'
})
},
handleSuccess(response, file,fileList) {
console.log(response,'结果')
console.log(response,fileList)
this.uploadLoading =false
this.urlList(response)
},
urlList(res){
const obj={
id:MathRandom(),
url:res.data.data,
status:'success',
uid:MathRandom()
}
console.log(obj)
this.value.push(obj)
this.go()
}
}
}
</script>
<style lang='scss' scoped>
.allUpload{
.left{
float: left;
width: 148px;
height: 148px;
border-radius: 6px;
border: 1px solid #c0ccda;
margin:0 20px 20px 0;
overflow: hidden;
position: relative;
cursor: pointer;
&:hover{
.content-wrap{
display: block;
}
}
img{
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.content-wrap{
display: none;
position: absolute;
width: 100%;
height: 100%;
background:rgba($color: #000000, $alpha: 0.4);
.content{
width: 100%;
height: 100%;
i{
color: #fff;
font-size: 18px;
&:nth-of-type(1){
margin-right: 10px;
}
&:nth-of-type(2){
margin-left: 10px;
}
}
}
}
}
.wrap{
float: left;
}
}
</style>
使用组件
<template>
<div>
<Upload
:max="4"
v-model="active"
>
</Upload>
</div>
</template>
<script>
//
import draggable from 'vuedraggable'
import Upload from '@/components/Upload'
import {MathRandom} from '@/utils/auth'
export default {
name: 'treeDrag',
components: { draggable },
data () {
return {
active:[]
}
},
components:{
Upload
},
mounted(){
setTimeout(()=>{
const obj ={
url:'https://tcity-mall.oss-cn-shenzhen.aliyuncs.com/2020/09/29/b46661a32d914158a4ae68a026cb6e83.jpg',
id:MathRandom(),
status:'success',
uid:MathRandom()
}
this.active.push(obj)
},2000)
}
}
</script>
效果图
