element-ui upload上传功能

upload上传功能加入可拖拽

<el-upload
      ref="upload"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :drag="uploadData.drag"
      :file-list="fileList"
      :show-file-list="uploadData.showList"
      :action="host"
      :auto-upload="uploadData.autoUpload"
      :data="formData"
      :on-exceed="changeExceed"
      :limit="uploadData.limit"
      :accept="uploadData.accept"
      :multiple="uploadData.multiple"
      :list-type="uploadData.listType"
      class="upload-demo"
      v-if="uploadSuccessFilesList.length < uploadData.limit"
    >
      <div class="upload-content-box" v-if="uploadData.diy">
        <i class="el-icon-circle-plus-outline"></i>
        <div class="el-upload__text">添加上传图片</div>
      </div>
      <el-button
        v-else
        :icon="uploadData.btnIcon ? uploadData.btnIcon : ''"
        v-db-click
        type="text"
      >{{uploadData.title ? uploadData.title : '上传图片'}}</el-button>
      <!-- <el-button
        v-db-click
        slot="trigger"
        type="primary"
      >{{ uploadData.name ? uploadData.name: '选取文件' }}</el-button>-->
    </el-upload>

这里加入一些自定义的文字或者图片，具体el-upload的参数以及上传的函数，我就不细说了。

加入可拖拽vuedraggable

<draggable
      v-show="uploadData.listShow ? uploadData.listShow : false"
      v-model="uploadSuccessFilesList"
      class="el-upload-list el-upload-list--picture-card"
      element="ul"
      @update="draggableUpdate"
      @start="draggableStart"
    >
      <li
        v-for="(item, index) in uploadSuccessFilesList"
        :key="index"
        tabindex="0"
        :class="'el-upload-list__item' + (uploadData.diy? '' :  ' diy-list__item')"
        @click="changeImg(index)"
      >
        <el-image
          style="width: 100%; height: 100%"
          class="preview-img"
          :src="item"
          :preview-src-list="uploadSuccessFilesList"
        ></el-image>
        <div class="handle-icon">
          <i
            style="font-size: 12px; color: #fff;"
            class="el-icon-delete"
            @click="clickImgDelete(index)"
          />
        </div>
        <span v-if="uploadData.title && index === 0" class="pic-title">{{uploadData.title}}</span>
      </li>
    </draggable>

这里把el-upload自带的照片墙改变了一下。

拖拽数据处理

draggableUpdate(data, index) {
	// 拖拽更新，在这里进行数据处理
},
draggableStart(data) {
	// 拖拽开始，这里的data,是开始拖拽的数据
}

图片删除操作

// 删除图片
	// splice最后一个参数加入null，是为了防止splice删除之后，下标变化
      this.uploadSuccessFilesList.splice(index, 1, null);
      this.uploadSuccessFilesList = this.uploadSuccessFilesList.filter(
        (item) => {
          return item !== null;
        }
      );
      // 这里把删除之后的图片数组回传给父组件
      this.$emit("delImg", this.uploadSuccessFilesList, index);

最后附上自己的样式

.upload-box {
    display: flex;
}

.el-upload-list {
    margin-left: 8px;
}

.el-upload-list--picture-card .el-upload-list__item {
    margin-left: 8px !important;
    margin-right: 0px;
}

.el-upload-list__item {
    .pic-title {
        display: inline-block;
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0px;
        z-index: 10;
        left: 0;
    }
}

.upload-content-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .el-icon-circle-plus-outline {
        // width: 36px;
        // height: 36px;
        font-size: 36px;
    }
    .el-upload__text {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 21px;
    }
}

.el-upload-dragger {
    width: 150px !important;
    height: 150px !important;
}

.el-upload {
    width: 150px !important;
    height: 150px !important;
}

.el-upload--picture-card {
    border: 0px;
}

.el-upload-list__item {
    width: 150px;
    height: 150px;
    &:hover {
        .handle-icon {
            display: flex;
        }
    }
}

.diy-list__item {
    width: 50px !important;
    height: 50px !important;
}

.handle-icon {
    width: 100%;
    height: 30px;
    display: none;
    align-items: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    // text-align: center;
}