基于vue+el-upload图片上传(自用屎山)

一份屎山版的图片上传

<template>
  <!--
    图片上传个数 max
    图片预上传列表 fileList
    图片上传和回显容器 upLoadList.sync

   ref提交图片的方法 submitHandler
   this.$emit('submitHandler')
  -->
  <div style="display: flex">
    <div>

      <draggable
        :list="fileList"
        :disabled="!enabled"
        class="list-group myImgList"
        ghost-class="ghost"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
        :animation="500"
      >
        <div class="list-group-item smallImg" v-for="(element, index) in fileList" :key="index">
          <el-image :src="element.url" style="border-radius: 5px;width: 60px;height: 60px" :preview-src-list="[element.url]"/>
          <span class="el-icon-circle-close" @click="upLoadRemove(element,fileList)"></span>
        </div>
      </draggable>
    </div>
    <div>
      <el-upload
        :limit="max"
        class="picture-cardimgs imageUrls"
        :class="{none:max<=fileList.length}"
        :on-preview="handlePictureCardPreview"
        multiple
        action="https://nahuo.doukuai.shop/api/upload/image/file"
        :on-success="uploadSuccess"
        :on-change="uploadChange"
        :on-remove="upLoadRemove"
        :on-exceed="handleExceed"
        :file-list.sync="fileList"
        list-type="picture-card"
        :show-file-list="false"
      >
        <el-dialog :visible.sync="dialogImg" :modal="false">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

        <div slot="trigger" class="imageUrlsAdd">
          <i class="el-icon-plus"></i>
        </div>
        <div>

        </div>
      </el-upload>
    </div>
    <div>
      <!--<el-button size="mini" type="primary" @click="submitHandler" style="margin: 25px 0 0 10px">确 定</el-button>-->
    </div>


  </div>
</template>

<script>
// import { uploadKodoApi } from '@/api/system/afterSale'
import axios from 'axios'
import draggable from 'vuedraggable'

export default {
  components: {draggable},
  props: {
    max: {
      type: Number,
      required: false,
      default: 5
    },
    upLoadList: {
      type: Array,
      required: false,
      default: () => []//默认值
    },
  },
  data() {
    return {
      //拖拽相关
      enabled: true,
      dragging: false,
      // 图片相关
      fileList: [...this.upLoadList],
      dialogImageUrl: [],
      dialogImg: false,
      upImgUrl:'这里是上传图片的服务器地址'
    }
  },
  methods: {
    //拖拽
    checkMove: function (e) {
      window.console.log('Future index: ' + e.draggedContext.futureIndex)
    },
    //===============图片上传==============
    // 移除附件
    upLoadRemove(file, fileList) {
      let tempFileList = []
      for (var index = 0; index < fileList.length; index++) {
        if (this.fileList[index].name !== file.name) {
          tempFileList.push(this.fileList[index])
        }
      }
      this.fileList = tempFileList
      this.$emit('update:upLoadList', this.fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImg = true
    },
    // 监控上传文件列表
    uploadChange(file, fileList) {
      let existFile = fileList
        .slice(0, fileList.length - 1)
        .find((f) => f.name === file.name)
      if (existFile) {
        this.$message.error('当前文件已经存在!')
        fileList.pop()
      }
      this.fileList = fileList

    },
    //  :on-exceed="handleExceed"
    // 选取文件超过数量提示
    handleExceed(files, fileList) {
      this.$message.warning(
        `限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    // 手动上传图片 到服务器  formidable接收
    async submitUpload() {
      let formData = new FormData()
      this.fileList.forEach((item) => {
        formData.append('files', item.raw)
      })
      try {
        // 上传图片
        let result = await axios({
          method: 'post',
          baseURL: this.upImgUrl,
          headers: {}
        }) // 图片
        console.log('图片列表', result.data)
        // this.$message.success('上传成功')
        console.log('上传成功')
        this.$emit('update:upLoadList', result.data)
      } catch (error) {

      }
    },
    // 上传成功
    uploadSuccess() {
      let formData = new FormData()
      this.fileList.forEach((item, index) => {
        formData.append('files', item.raw)
        if (item.response) {
          this.fileList[index] = {
            name: item.response.data.path,
            url: item.response.data.path,
            imageUrl: item.response.data.path,
          }
        }
      })
      this.$emit('update:upLoadList', this.fileList)
    },

    // 上传
    submitHandler() {
      this.submitUpload()
    },
  },


    upLoadList: {
      handler(nval, oval) {
        // console.log('图片上传组件更新upLoadList', nval)
        // console.log('图片上传组件更新fileList', this.fileList)
        this.fileList = nval
      }, deep: true, immediate: true
    }
  }
}
</script>

<style scoped>
/*列表样式*/
.myImgList {
  display: flex;
  flex-wrap: wrap;
}

/*展示图样式*/
.smallImg {
  width: 60px;
  height: 60px;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
}

.smallImg span {
  display: none;
}

.smallImg:hover span {
  display: block;
  position: absolute;
  color: red;
  right: 0;
  top: 0;
}

/* 图片上传*/
>>> .imageUrls .el-upload-list__item {
  width: 60px;
  height: 60px;
}

>>> .imageUrls .el-upload-dragger {
  height: 60px;
  width: 60px;
}

>>> .imageUrls .el-upload--picture-card {
  /*margin-top: 10px;*/
  height: 60px;
  width: 60px;
}
.none{
  display: none;
}

>>> .imageUrls .el-upload__text {

}

>>> .el-image-viewer__wrapper .el-icon-circle-close{
  color: #fff;
}

/*添加图片的 加号*/
.imageUrlsAdd {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 60px;
}
</style>