Vue中el-upload增加拖拽排序的简单方法-天狐博客

在改动很小的情况下，为多图片上传的el-upload增加拖动排序。无需自己渲染列表。注意一点fileList需要再onchange里自己获取。这个属性不是双向绑定的。

<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>

<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>

</el-upload>

<el-dialog :visible.sync="dialogVisible" append-to-body>

</el-dialog>

</div>

</template>

<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>

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增加拖拽排序的简单方法

Vue中el-upload增加拖拽排序的简单方法

与本文相关的文章

Hi，您需要填写昵称和邮箱！