使用element+vuedraggable实现图片上传拖拽排序

来源:csdn博客 分类: 文章浏览史 发布时间:2020-12-11 15:51:50 最后更新:2020-12-11 浏览:146
转载声明:
本文为摘录自“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>

效果图

在这里插入图片描述

php技术微信