vue 和element上传图片以及进行拖拽图片排序。

需求场景

需求要求进行上传图片的同时进行排序，使用element的上传图片，拖拽使用的是vuedraggable的插件，记录总结一下。

拖拽插件

插件中文翻译git地址：https://github.com/itmier/Vue.Draggable，具体可去地址浏览
对vuedraggbale的插件进行安装使用：

1.安装插件；

npm i -S vuedraggable

2. 局部引入插件(在.vue的文件中)；

import draggable from 'uedraggbale'

components: {draggable},

3.使用插件

//imgList：图片的数据数组，
<draggable v-model="imgList"
          :animation="1000">
   <div v-for="item in imgList" :key="item.id">{{item.name}}</div>
</draggable>

el-upload上传文件组件

   // 配合element的本身的样式，不用写样式。全部代码
     <template>
  <div class='base-updata'>

    <div class="img-sort">
      <ul class="el-upload-list el-upload-list--picture-card">
        <draggable
          v-model="imgList"
          :animation="1000"
          :sort="true"
          v-if="showDraggable"
        >
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right:10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            >
          <!--   <i class="el-icon-close"></i> -->
            <span class="el-upload-list__item-actions">
              <!-- 预览 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 删除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                  v-if="!disabled">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </draggable>
        <template v-else>
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right:10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            >
            <i class="el-icon-close"></i>
            <span class="el-upload-list__item-actions">
              <!-- 预览 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 删除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                  v-if="!disabled"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </template>
      </ul>
      <el-upload
        style="display: inline-block"
        ref="uploadFilemain"
        :show-file-list="false"
        :file-list="imgList"
        list-type="picture-card"
        :before-upload="beforeUpload"
        :http-request="(file, fileList) => requestImgHttps(file)"
        :on-preview="handlePictureCardPreview"
        :limit="limit"
        :disabled="disabled"
        :class="imgList.length == limit ? 'mf' : ''"
      >
        <!--            :disabled="optType == 'detail'" -->
        <i class="el-icon-plus"></i>
      </el-upload>
      <span style="position: relative; top: 116px; left: 10px">{{ imgList.length }} <span v-if="limit
      !=100">{{"/" + limit}}</span> <span v-if="showDraggable">（拖拽排序）</span></span>
    </div>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "base-updata",
  components: {draggable},
  props: {
    //图片列表
    imgList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否显示拖拽
    showDraggable: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    //上传图片署名
    imgTypeName: {
      type: String,
      Request: true,
    },
    //上传图片下标
    imgTypeIdex: {
      type: Number,
      Request: true,
    },
    //图片限制
    limit: {
      type: Number,
       default: () => {
        return 100;
      },
    },
    //图片禁止
    disabled: {
      type: Boolean,
       default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      dialogVisible: false, //图片预览
    };
  },
  created() {},
  mounted() {},
  methods: {
    //图片上传验证
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.changeLimt(file).then((res) => {
          file.isFlag = res;
          if (file.isFlag) {
            return resolve(true);
          } else {
            return reject(false);
          }
        });
      });
    },
    changeLimt(file) {
      const _this = this;
      const isSize = new Promise(function (resolve, reject) {
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.src = _URL.createObjectURL(file);
        img.onload = function () {
          let e_width = img.width >= 600 && img.width <= 1200;
          let e_height = img.height >= 600 && img.height <= 1200;
          if (file.type == "image/png" || file.type == "image/jpg" || file.type == "image/jpeg") {
            const valid = e_width && e_height;
            if (valid) {
              return resolve();
            } else {
              return reject();
            }
          } else {
            return reject();
          }
        };
      }).then(
        () => {
          return true;
        },
        () => {
          _this.$message.warning({
            message: "图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
            btn: false,
          });
          return false;
        }
      );

      return isSize;
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除
    handleRemove(index) {
      this.$emit("handleRemove", this.imgTypeName, index);
    },
    /**
     * 上传图片 请求
     * @param {string} file 图片文件
     * @param {string} imgTypeName 图片署名
     * @param {string} imgTypeIdex 图片位置下标
     * @return {Function} 抛出函数requestImgHttps
     */
    requestImgHttps(file) {
      this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
    },
  },
};
</script>
<style lang='scss' scoped>
.img-sort {
  display: flex;
  flex-wrap: wrap;
}
.mf {
  ::v-deep .el-upload--picture-card {
    display: none !important;
  }
}
</style>

使用组件

        <el-form-item label="商品轮播图：" prop="images_circulate" >
          <upload-img
            :imgList="formInfo.images_circulate"
            :limit="5"
            :showDraggable="true"
            :imgTypeName="`swiperImg`"
            @handleRemove="handleRemove"
            @requestImgHttps="requestImgHttps"
            :disabled="$route.query.type == 3?true:false"
          ></upload-img>
        </el-form-item>

    //图片删除
    handleRemove(type, index) {
      switch (type) {
        //轮播图删除
        case "swiperImg":
          this.formInfo.images_circulate.splice(index, 1);
          break;
        default:
          break;
      }
    },
    //图片上传
    requestImgHttps(file, key, index) {
      var formdata = new FormData();
      formdata.append("img", file.file);
      switch (key) {
        case "mainImg":
          this.uploadFile(formdata).then((res) => {
            if (res.code == 200) {
              let ob = { name: "xxx.jpg", url: res.data };
              this.formInfo.image_main.push(ob);
            } else {
              thi s.$message({
                  type: "warning",
                  message: res.msg,
                });
            }
          });
          break;
        default:
          break;
      }
    },