vue3 + ts + element-plus（el-upload + vuedraggable实现上传OSS并排序）

本文链接：https://blog.csdn.net/qq_42543264/article/details/145010779

这里创建项目就不多说了

安装element-plus

npm install element-plus

安装vuedraggable

npm install vuedraggable

安装ali-oss

npm install ali-oss

这里是封装一下：在components创建文件夹jc-upload>jc-upload.vue

在封装的过程中遇到了一个问题就是draggable和el-upload上传按钮独占一行，显然不是我们需要的效果，先看问题

百度了一下，没有找到什么解决办法，这里通过一行css解决以上问题，如有大佬有更好的方案可以分享一下

.draggable-container {
     display: contents;
 }

完整代码

<template>
    <div class="upload-container">
      <draggable class="draggable-container" v-model="newsFileList" itemKey="url" ghost-class="ghost" animation="300">
        <template #item="{ element }">
          <ul class="el-upload-list el-upload-list--picture-card">
            <li :key="element.url" class="el-upload-list__item is-success animated">
              <img class="el-upload-list__item-thumbnail" :src="element.url" alt="">
              <label class="el-upload-list__item-status-label">
                  <i class="el-icon el-icon--upload-success el-icon--check">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z">
                      </path>
                    </svg>
                  </i>