图片拖拽排序 - 图1

安装拖拽插件

  1. npm install vuedraggable

main.js 引入插件

  1. // 图片拖动
  2. import vuedraggable from 'vuedraggable'
  4. // 全局组件挂载
  5. Vue.component('vuedraggable', vuedraggable)

如何使用

  1. <imgUpload v-model="imgList" :limit="20" @input="handleProductImg" />
  3. <script>
  4.     import imgUpload from '@/components/upload/imgUpload'
  5.      export default {
  6.         name: "imgTest",
  7.         components: {imgUpload},
  8.         data() {
  9.             return {
  10.                imgList:[]，
  11.                imgs:""
  12.             };
  13.         },
  14.         methods: {
  15.              handleProductImg(imgUrl) {
  16.               this.imgList = imgUrl;
  17.               // 逗号拼接   
  18.               this.imgs = imgUrl.join(",");
  19.             },
  20.         }
  21.      }
  22. </script>
  • 组件代码 imgUpload.vue，组件路径 manage-ui/src/components/upload/imgUpload.vue
  1. <template>
  2.   <div class="uploadWrapper">
  3.     <vuedraggable
  4.       :class="{ single: isSingle, maxHidden: isMaxHidden }"
  5.       @end="onDragEnd"
  6.       @start="onDragStart"
  7.       class="vue-draggable"
  8.       draggable=".draggable-item"
  9.       tag="ul"
  10.       v-model="imgList"
  11.     >
  12.       <!-- 拖拽元素 -->
  13.       <li
  14.         :key="item + index"
  15.         :style="{ width: width + 'px', height: height + 'px' }"
  16.         class="draggable-item"
  17.         v-for="(item, index) in imgList"
  18.       >
  19.         <el-image :preview-src-list="imgList" :src="item"></el-image>
  20.         <div @click="onRemoveHandler(index)" class="shadow">
  21.           <i class="el-icon-delete"></i>
  22.         </div>
  23.       </li>
  24.       <!-- 上传按钮 -->
  25.       <el-upload
  26.         :action="url"
  27.         :before-upload="beforeUpload"
  28.         :headers="headers"
  29.         :limit="limit"
  30.         :multiple="!isSingle"
  31.         :on-exceed="onExceed"
  32.         :on-success="onSuccessUpload"
  33.         :show-file-list="false"
  34.         :style="{ width: width + 'px', height: height + 'px' }"
  35.         accept=".jpg,.jpeg,.png,.gif"
  36.         class="uploadBox"
  37.         ref="uploadRef"
  38.         slot="footer"
  39.       >
  40.         <i class="el-icon-plus uploadIcon">
  41.           <span class="uploading" v-show="isUploading">正在上传...</span>
  42.           <span
  43.             class="limitTxt"
  44.             v-if="!isUploading && limit && limit!==99 && !isSingle"
  45.           >最多{{ limit }}张</span>
  46.         </i>
  47.       </el-upload>
  48.     </vuedraggable>
  49.   </div>
  50. </template>
  52. <script>
  53.   import vuedraggable from 'vuedraggable'
  54.   // 获取token，用于后端接口登录校验，根据公司的业务自行移除或替换就行
  55.   import {getToken} from "@/utils/auth"
  56.   // import lrz from 'lrz' // 前端图片压缩插件
  57.   import tools from '@/utils/tools'
  59.   export default {
  60.     name: 'ImgUpload',
  62.     props: {
  63.       // 图片数据(图片url组成的数组) 通过v-model传递
  64.       value: {
  65.         type: Array,
  66.         default() {
  67.           return []
  68.         }
  69.       },
  70.       // 限制上传的图片数量
  71.       limit: {
  72.         type: Number,
  73.         default: 8
  74.       },
  75.       // 限制上传图片的文件大小(kb)
  76.       size: {
  77.         type: Number,
  78.         default: 500
  79.       },
  80.       // 是否是单图上传(单图上传就是已传图片和上传按钮重叠)
  81.       isSingle: {
  82.         type: Boolean,
  83.         default: false
  84.       },
  85.       // 是否使用图片压缩
  86.       useCompress: {
  87.         type: Boolean,
  88.         default: false
  89.       },
  90.       // 图片显示的宽度(px)
  91.       width: {
  92.         type: Number,
  93.         default: 100
  94.       },
  95.       // 图片显示的高度(px)
  96.       height: {
  97.         type: Number,
  98.         default: 100
  99.       }
  100.     },
  102.     data() {
  103.       return {
  104.         url: process.env.VUE_APP_BASE_API + "/common/upload",
  105.         headers: {Authorization: 'Bearer ' + getToken()},
  106.         isUploading: false, // 正在上传状态
  107.         isFirstMount: true // 控制防止重复回显
  108.       }
  109.     },
  111.     computed: {
  112.       // 图片数组数据
  113.       imgList: {
  114.         get() {
  115.           return this.value
  116.         },
  117.         set(val) {
  118.           if (val.length < this.imgList.length) {
  119.             // 判断是删除图片时同步el-upload数据
  120.             this.syncElUpload(val)
  121.           }
  122.           // 同步v-model
  123.           this.$emit('input', val)
  124.         }
  125.       },
  126.       // 控制达到最大限制时隐藏上传按钮
  127.       isMaxHidden() {
  128.         return this.imgList.length >= this.limit
  129.       }
  130.     },
  132.     watch: {
  133.       value: {
  134.         handler(val) {
  135.           if (this.isFirstMount && this.value.length > 0) {
  136.             this.syncElUpload()
  137.           }
  138.         },
  139.         deep: true
  140.       }
  141.     },
  143.     mounted() {
  144.       if (this.value.length > 0) {
  145.         this.syncElUpload()
  146.       }
  147.     },
  149.     methods: {
  150.       // 同步el-upload数据
  151.       syncElUpload(val) {
  152.         const imgList = val || this.imgList
  153.         this.$refs.uploadRef.uploadFiles = imgList.map((v, i) => {
  154.           return {
  155.             name: 'pic' + i,
  156.             url: v,
  157.             status: 'success',
  158.             uid: tools.createUniqueString()
  159.           }
  160.         })
  161.         this.isFirstMount = false
  162.       },
  163.       // 上传图片之前
  164.       beforeUpload(file) {
  165.         this.isFirstMount = false
  166.         // if (this.useCompress) {
  167.         //   // 图片压缩
  168.         //   return new Promise((resolve, reject) => {
  169.         //     lrz(file, { width: 1920 }).then((rst) => {
  170.         //       file = rst.file
  171.         //     }).always(() => {
  172.         //       if (validImgUpload(file, this.size)) {
  173.         //         this.isUploading = true
  174.         //         resolve()
  175.         //       } else {
  176.         //         reject(new Error())
  177.         //       }
  178.         //     })
  179.         //   })
  180.         // } else {
  181.         //   if (validImgUpload(file, this.size)) {
  182.         //     this.isUploading = true
  183.         //     return true
  184.         //   } else {
  185.         //     return false
  186.         //   }
  187.         // }
  188.       },
  189.       // 上传完单张图片
  190.       onSuccessUpload(res, file, fileList) {
  191.         // 这里需要根据你自己的接口返回数据格式和层级来自行修改
  192.         if (res.url) {
  193.           // 判断接口上传成功
  194.           if (this.imgList.length < this.limit) {
  195.             // 未超限时，把接口返回的图片url地址添加到imgList
  196.             this.imgList.push(res.url)
  197.             this.$emit('input', this.imgList)
  198.           }
  199.         } else {
  200.           // 判断接口上传失败
  201.           this.syncElUpload()
  202.           this.$message({type: 'error', message: res.msg})
  203.         }
  204.         this.isUploading = false
  205.       },
  206.       // 移除单张图片
  207.       onRemoveHandler(index) {
  208.         this.$confirm('确定删除该图片?', '提示', {
  209.           confirmButtonText: '确定',
  210.           cancelButtonText: '取消',
  211.           type: 'warning'
  212.         })
  213.           .then(() => {
  214.             this.imgList = this.imgList.filter((v, i) => {
  215.               return i !== index
  216.             })
  217.           })
  218.           .catch(() => {
  219.           })
  220.       },
  221.       // 超限
  222.       onExceed() {
  223.         this.$refs.uploadRef.abort() // 取消剩余接口请求
  224.         this.syncElUpload()
  225.         this.$message({
  226.           type: 'warning',
  227.           message: `图片超限，最多可上传${this.limit}张图片`
  228.         })
  229.       },
  230.       onDragStart(e) {
  231.         e.target.classList.add('hideShadow')
  232.       },
  233.       onDragEnd(e) {
  234.         e.target.classList.remove('hideShadow')
  235.       }
  236.     },
  238.     components: {vuedraggable}
  239.   }
  240. </script>
  242. <style lang="less" scoped>
  243.   /deep/ .el-upload {
  244.     width: 100%;
  245.     height: 100%;
  246.   }
  248.   // 上传按钮
  249.   .uploadIcon {
  250.     width: 100%;
  251.     height: 100%;
  252.     position: relative;
  253.     display: flex;
  254.     align-items: center;
  255.     justify-content: center;
  256.     border: 1px dashed #c0ccda;
  257.     background-color: #fbfdff;
  258.     border-radius: 6px;
  259.     font-size: 20px;
  260.     color: #999;
  262.     .limitTxt,
  263.     .uploading {
  264.       position: absolute;
  265.       bottom: 10%;
  266.       left: 0;
  267.       width: 100%;
  268.       font-size: 14px;
  269.       text-align: center;
  270.     }
  271.   }
  273.   // 拖拽
  274.   .vue-draggable {
  275.     display: flex;
  276.     flex-wrap: wrap;
  278.     .draggable-item {
  279.       margin-right: 5px;
  280.       margin-bottom: 5px;
  281.       border: 1px solid #ddd;
  282.       border-radius: 6px;
  283.       position: relative;
  284.       overflow: hidden;
  286.       .el-image {
  287.         width: 100%;
  288.         height: 100%;
  289.       }
  291.       .shadow {
  292.         position: absolute;
  293.         top: 0;
  294.         right: 0;
  295.         background-color: rgba(0, 0, 0, .5);
  296.         opacity: 0;
  297.         transition: opacity .3s;
  298.         color: #fff;
  299.         font-size: 20px;
  300.         line-height: 20px;
  301.         padding: 2px;
  302.         cursor: pointer;
  303.       }
  305.       &:hover {
  306.         .shadow {
  307.           opacity: 1;
  308.         }
  309.       }
  310.     }
  312.     &.hideShadow {
  313.       .shadow {
  314.         display: none;
  315.       }
  316.     }
  318.     &.single {
  319.       overflow: hidden;
  320.       position: relative;
  322.       .draggable-item {
  323.         position: absolute;
  324.         left: 0;
  325.         top: 0;
  326.         z-index: 1;
  327.       }
  328.     }
  330.     &.maxHidden {
  331.       .uploadBox {
  332.         display: none;
  333.       }
  334.     }
  335.   }
  337.   // el-image
  338.   .el-image-viewer__wrapper {
  339.     .el-image-viewer__mask {
  340.       opacity: .8;
  341.     }
  343.     .el-icon-circle-close {
  344.       color: #fff;
  345.     }
  346.   }
  347. </style>

参考

https://blog.csdn.net/u010059669/article/details/104038160
https://www.it610.com/article/1295907878112141312.htm