這里采用自定義縮略圖模版，定義排序按鈕。

頁(yè)面代碼

<el-upload action="#" :file-list="imageList" list-type="picture-card">
    <i class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="file" slot-scope="{file}" style="width: 100%;height: 100%;">
            <!-- <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> -->
            <el-image v-if="file.status !== 'uploading'" style="width: 100px; height: 100px" :src="file.url" fit="contain"></el-image>
            <label class="el-upload-list__item-status-label">
                <i class="el-icon-upload-success el-icon-check"></i>
            </label>
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleMove(file)">
                    <i class="el-icon-back"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                </span>
            </span>
            <el-progress v-if="file.status === 'uploading'" type="circle" stroke-width="6"
                :percentage="parseInt(file.percentage, 10)">
            </el-progress>
        </div>
</el-upload>

JS

點(diǎn)擊按鈕圖片向前移動(dòng)一格

handleMove(file) {
            let idx;
            this.images.forEach((image, index) => {
                if (image.url == file.url) {
                    idx = index;
                }
            })
            console.log(idx)
            if (idx > 0) {
                let tmp = this.imageList[idx - 1];
                Vue.set(this.imageList, idx - 1, this.imageList[idx])
                Vue.set(this.imageList, idx, tmp)
            }
        },

按圖片順序保存序號(hào)即可。