vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能

实现效果：

功能实现：

要实现图片的拖拽功能首先需要安装vuedraggable库

npm install vuedraggable --save

在组件中引入并注册 vuedraggable

 使用element ui的el-upload组件，结合vuedraggable实现图片的上传与排序功能

   

       
           
              

                 
                 

                    
                       
                    
                    
                       
                    
                  
                
             
         
         
            点击上传
         
    

 
    
      
    

上传图片时处理方法

    uolpadMorePic(file) {
      let up = new FormData();
      up.append("image", file.file);
      up.append("name", this.editForm.name);
      //上传图片接口
      bannerUp(up).then((res) => {
          if (res.status == "0000") {
            this.fileList.push({
              name: res.data.imageUrl,
              url: res.data.imageUrl,
              uid: Math.floor(Math.random() * 100000),
            })
            //上传的图片和回显的图片进行重新排序
            this.fileList.map((item, index) =>
              item.sortNum = index + 1
            )
            this.$message({
              type: "success",
              message: "上传成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.codemsg,
            });
            let uid = file.uid; // 关键作用代码，去除文件列表失败文件
            let idx = this.$refs.uploadFile.uploadFiles.findIndex(
              (item) => item.uid === uid
            ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
          }
        })
        .catch((err) => {
          console.log(err);
          let uid = file.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.uploadFile.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
        });
    },

图片查看、删除及拖拽排序

//删除图片
 handleRemoveNew(file, index) {
    this.fileList.splice(index, 1)
 },
 // 处理图片预览效果
 handlePreviewNew(index) {
    this.previewPath = this.fileList[index].url
    this.previewVisible = true
 },
 //拖拽图片排序
 dataDragEnd() {
    // 拖拽图片更换位置 并重新从1开始排序
    this.fileList.forEach((item, index) => {
      item.sortNum = index + 1
    })
    //过滤一下url为空的数据
    this.fileList = this.fileList.filter(item => {
      return item.url != ''
    });
 },

编辑弹窗图片回显

let res = 接口获取的详情数据
res.data.slider_image.map((item, index) => {
   this.fileList.push({
      url: item.url ,
      name: item.name,
      sortNum: index + 1,
    });
});

一些样式