背景
如果上传到后台的图片要根据选择的顺序来排序。有种方法是在before-upload属性里加时间戳，后台根据时间顺序，但是感觉不太好。
注意
因为使用了http-request，这个属性覆盖了原有的上传方法，el-upload 属性:data，on-progress，on-success，on-preview，before-upload等等好多关于上传的都失效了
demo代码
<template> <!-- 上传多张图片 --> <div class="mm-upload-wrapper"> <div class="upload-component"> <el-upload ref="imageListUpload" drag :on-exceed="onExceed" :limit="5" :http-request="uploadNow" :on-change="handleChange" :auto-upload="false" action="#" class="image-uploader" multiple :disabled="loading" :show-file-list="false" accept="image/*,.pdf"> <i :class="loading ? 'el-icon-loading' : 'el-icon-upload'"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">支持上传图片格式及pdf文件，大小不限制，数量限制50</div> </el-upload> </div> <div class="table-list"> <div>可拖动表格行改变文件顺序</div> <el-table :data="fileListCache" ref="singleTable" style="width: 100%" row-key="uid"> <el-table-column label="文件名" prop="name" show-overflow-tooltip> </el-table-column> <el-table-column label="上传进度" width="240" align="center"> <template slot-scope="scope"> <el-tag size="medium" v-if="scope.row.percentage == 100">上传成功</el-tag> <el-progress v-else-if="0 < parseInt(scope.row.percentage) && parseInt(scope.row.percentage) < 100" :text-inside="true" :stroke-width="26" :percentage="scope.row.percentage"></el-progress> </template> </el-table-column> <el-table-column label="类型" width="180"> <template slot-scope="scope"> {{scope.row.raw.type}} </template> </el-table-column> <el-table-column label="大小" width="180" :formatter="formatterSize" prop="size"> </el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-popover placement="top" width="160" :ref="'popover-' + scope.$index"> <p>是否确定删除</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="handleClose(scope.$index)">取消</el-button> <el-button type="primary" :disabled="scope.row.percentage == 100" size="mini" @click="handleClose(scope.$index);handleDelete(scope.$index);">确定</el-button> </div> <el-button slot="reference" size="mini" type="danger" :disabled="scope.row.percentage == 100">删除 </el-button> </el-popover> </template> </el-table-column> </el-table> </div> <el-button type="primary" @click="uploadNow">上传</el-button> </div></template><script type="text/babel">import Sortable from "sortablejs";import axios from "axios"export default { data() { return { imgUrl: '', formData: null, fileListCache: [], handleSuccess: null, loading: false, } }, mounted() { //防抖 this.handleSuccess = this.debounce(this.uploadSuccess, 500) this.dragSort(); }, methods: { handleDelete(index) { this.fileListCache.splice(index, 1) }, handleClose(index) { this.$refs['popover-' + index].doClose() }, // 格式化大小 formatterSize(row) { if (row.size / 1024 > 1024) { return (row.size / 1024 / 1024).toFixed(2) + "MB" } else { return (row.size / 1024).toFixed(2) + "KB" } }, //表格拖动排序 dragSort() { const el = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] this.sortable = Sortable.create(el, { ghostClass: 'sortable-ghost', setData: function (dataTransfer) { dataTransfer.setData('Text', '') }, onEnd: e => { //e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置 const targetRow = this.fileListCache.splice(e.oldIndex, 1)[0]; this.fileListCache.splice(e.newIndex, 0, targetRow); console.log(this.fileListCache) // let dragId = this.fileListCache[e.newIndex].id;//拖动行的id } }) }, // 超出最大上传数量触发 onExceed() { this.$message.error('超出最大上传数量') }, // 新版本element，通过以下方法获取展示图片的路径 getUrl(raw) { return URL.createObjectURL(raw) }, debounce(fn, delay) { var timer = null; // 声明计时器 return function () { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; }, // this.$refs.imageListUpload.submit(); 不走这个，所以没有以下函数 // beforeUpload(file) { // if (file.type.split('/')[0] === 'image') { // let tempSize = file.size / 2048 // if (tempSize > 1) { // this.$message.error('图片尺寸不得大于5M！') // return false // } // } // // this.loading = true // }, uploadNow() { var formData = new FormData() this.fileListCache.forEach(element => { formData.append("file", element.raw) }); formData.append('token', "123"); console.log(formData.get("file")); axios({ url: '/api****', method: 'post', data: formData, headers: { 'Content-Type': 'multipart/form-data' } }) }, handleChange(file, fileList) { console.log(fileList) this.fileListCache = fileList; }, onError() { this.$message.error('上传文件失败') }, // 获取图片宽高 // getImageInfo(url) { // return new Promise((resolve, reject) => { // let image = new Image() // image.src = `${url}` // image.onload = () => { // resolve({ // image: url, // width: image.width, // height: image.height // }) // } // image.onerror = () => { // reject(new Error('Could not load image at ' + url)); // }; // }) // }, }}</script><style lang="less" scoped>.mm-upload-wrapper { padding: 20px;}.mm-upload-wrapper .upload-component { text-align: center;}.mm-upload-wrapper .table-list { margin-top: 30px;}</style>
