uk_front/components/ImageUpload.vue

<template>
  <div class="com-image-upload">
    <draggable
      v-model="imageList"
      draggable=".image-item"
      @end="end"
      class="flex start wrap">
      <div
        v-for="(item, index) in imageList"
        :key="item.uid || index"
        class="image-item flex"
        :style="{ width: width, height: height }">
        <img
          :src="item.url"
          alt=""
          class="" />
        <div class="action-area flex center">
          <!-- 预览 -->
          <span
            v-if="!disablePreview"
            class="action-icon"
            @click="handlePictureCardPreview(item)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- 删除 -->
          <span
            class="action-icon"
            @click="handleRemove(index)">
            <i class="el-icon-delete"></i>
          </span>
        </div>
      </div>
      <el-progress
        v-show="loading"
        type="circle"
        :percentage="uploadPercent"
        :width="Number(width.slice(0, width.length - 2))"
        style="margin: 8px"></el-progress>
      <div
        class="upload-wrap"
        :class="{ hide: loading || imageList.length >= max }"
        :style="{ width: width, height: height }">
        <el-upload
          ref="pictureUpload"
          :multiple="true"
          :limit="max"
          action=""
          drag
          accept=".jpg,.png,.jpeg"
          class="custom-upload-item"
          list-type="picture-card"
          :file-list="imageList"
          :show-file-list="false"
          :auto-upload="false"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview"
          :on-change="
            (file, fileList) => {
              handleUpload(file, fileList)
            }
          ">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </draggable>

    <el-dialog :visible.sync="imageDialogVisible">
      <img
        width="100%"
        :src="imageUrl"
        alt="" />
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { common } from '@/api'

export default {
  name: 'ImageUpload',
  components: {
    draggable,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: 16,
    },
    disablePreview: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '150px',
    },
    height: {
      type: String,
      default: '150px',
    },
  },
  data() {
    return {
      // 组件内部数据.
      imageList: [],
      loading: false,
      uploadPercent: 0,
      imageDialogVisible: false,
      // 预览大图的url, 每次点击都会更新
      imageUrl: '',
    }
  },
  computed: {
    fulled() {
      return 0
    },
  },
  watch: {
    list() {
      this.imageList = JSON.parse(JSON.stringify(this.list))
    },
  },
  mounted(){
    this.updateList()
  },
  methods: {
    handleUpload(file, fileList) {
      this.fileList = []

      if (file.status === 'ready') {
        this.loading = true
        const interval = setInterval(() => {
          if (this.uploadPercent >= 99) {
            clearInterval(interval)
            return
          }
          this.uploadPercent += 1 // 进度条进度
        }, 100)
      }

      const formData = new FormData()
      fileList.forEach((file) => {
        formData.append('file', file.raw)
      })
      formData.append('type', 1)
      this.$axios
        .post(`/uk-api/user_base/imagesUpload`,formData)
        .then((response) => {
          if (response.result.code === 200) {
            this.imageList.push({
              url: response.result.data,
              uid: file.uid,
            })

            this.updateList()
            return
          }
          this.$message({
            message: response.result.message,
            type: 'warning',
          })
        })
        .catch((error) => {
          console.log(error, 'component upload image error')
          this.$message.error(error.response.data.msg)
        })
        .finally(() => {
          this.loading = false
          // 进度条恢复到初始状态
          this.uploadPercent = 0
        })
    },
    handleRemove(index) {
      this.imageList.splice(index, 1)
      this.updateList()
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url
      this.imageDialogVisible = true
    },
    // 每次更新imageList后手动更新父组件的数据, 不能用watch自动更新, 因为同时要watch prop值更新iamgeList, 同时watch会死循环.
    // 直接把prop数据绑定到dragable 和 el-upload的话vue和eslint会报错, 也可能造成调试困难
    updateList() {
      this.$emit('update:list', JSON.parse(JSON.stringify(this.imageList)))
    },
    end() {
      this.updateList()
    },
  },
}
</script>

<style lang="scss" scoped>

::v-deep .el-upload {
  border-style: solid;
  width: 100%;
  height: 100%;
}
::v-deep .el-upload-dragger {
  width: 100%;
  height: 100%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.com-image-upload {
  vertical-align: top;
}
.image-item {
  overflow: hidden;
  position: relative;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  margin-right: 8px;
  margin-bottom: 2px;
  img {
    width: 100%;
  }
  &:hover {
    .action-area {
      display: flex;
    }
  }
  .action-area {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 32px;
  }
  .action-icon {
    cursor: pointer;
    & + .action-icon {
      margin-left: 16px;
    }
  }
}
.upload-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: 2px;
  &.hide {
    display: none;
  }
}
.custom-upload-item {
  width: 100%;
  height: 100%;
}
</style>