vue3.0图片上传组件封装及拖动排序

<template>
  <div class="comp-template">
    <div>
      <el-upload
        action="#"
        list-type="picture-card"
        ref='uploadRef'
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-change="handleEditChange"
        :before-upload="beforeAvatarUpload"
        :on-exceed='handleExceed'
        :file-list="fileList"
        :limit="limit"
        :class="{ hide: hideUploadBtn }"
        :multiple="true"
        accept="image/*"
        :http-request="uploadImg"
      >
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible" :append-to-body='true' :align-center='true'>
        <div class="disflex-ja">
          <img
            w-full
            :src="dialogImageUrl"
            alt="图片预览"
            style="width: 80%; height: 80%"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="less">
@import './view.less';
</style>
<script>
import render from './index.js'
export default render
</script>

import {
    onMounted, ref, computed } from 'vue'
import {
    ElMessage