在改动很小的情况下，为多图片上传的el-upload增加拖动排序。无需自己渲染列表。注意一点fileList需要再onchange里自己获取。这个属性不是双向绑定的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <div> <el-upload ref="upload" :limit="99" :file-list.sync="fileList" :action="actionUrl" :headers="headers" :data="{ folder: 'image' }" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-change="handleChange" :show-file-list="true" multiple> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </div> </template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script> const envConfig = require('@/config/env.' + process.env.VUE_APP_NODE_ENV); import { getToken } from '@/utils/storage'; import Sortable from 'sortablejs'; export default { data() { return { actionUrl: `${envConfig.baseURL}/uploadFile`, headers: { Authorization: getToken() || '', }, dialogImageUrl: '', dialogVisible: false, fileList:[] }; }, mounted() { this.initDragSort(); }, methods: { initDragSort() { // 支持拖拽排序 const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0]; var that = this; Sortable.create(el, { onEnd: ({ oldIndex, newIndex }) => { // 交换位置 const arr = that.fileList; const page = arr[oldIndex]; arr.splice(oldIndex, 1); arr.splice(newIndex, 0, page); } }); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleChange(file, fileList){ this.fileList = fileList; } }, }; </script> |
转载请注明：天狐博客 » Vue中el-upload增加拖拽排序的简单方法