pm/views/admin/src/components/Upload/upImageWall.vue

<template>
  <div class="pre-img">
    <div v-for="(img, index) in value" :key="index" class="pre-img-item">
      <el-image
        style="width: 100%; height: 100%"
        :src="img"
        fit="cover"
        :preview-src-list="value"
      />
      <!--img :src="img"-->
      <!--i class="el-alert__icon el-icon-error remove-img" @click="handleRemoveImage(img)"/-->
      <div v-if="edit" class="move-control">
        <span
          class="move-left"
          style="font-size: 10px"
          @click="moveLeft(index)"
        ><i
          class="el-icon-caret-left"
        /></span>
        <span
          class="move-left"
          style="font-size: 10px"
          @click="handleRemoveImage(img)"
        ><i
          class="el-icon-delete"
        /></span>
        <span
          class="move-right"
          style="font-size: 10px"
          @click="moveRight(index)"
        ><i
          class="el-icon-caret-right"
        /></span>
      </div>
    </div>
    <el-upload
      v-if="edit"
      v-loading="loading"
      action="https://upload.qiniup.com"
      :before-upload="beforeUpload"
      :data="upData"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="imageList"
      :show-file-list="false"
      element-loading-spinner="el-icon-loading"
      name="file"
      list-type="picture-card"
      multiple
    >
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/api/qiniu'

export default {
  name: 'UpImage',
  props: {
    value: {
      type: Array,
      default: function() {
        return []
      }
    },
    edit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      upData: {
        token: ''
      },
      loading: false
    }
  },
  computed: {
    imageList() {
      return this.value
        ? this.value.map((v) => {
          return { name: 'x', url: v }
        })
        : {}
    }
  },
  methods: {
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 30) {
        this.$message.error('上传图片大小不能超过 30MB!')
        return false
      }
      let fileType = ''
      if (file.type === 'image/png') {
        fileType = 'png'
      } else if (file.type === 'image/jpeg') {
        fileType = 'jpg'
      } else {
        this.$message.error('上传图片只能是 JPG 或者 PNG 格式!')
        return false
      }
      const _self = this
      return new Promise((resolve, reject) => {
        getToken({ file_type: fileType })
          .then((response) => {
            const key = response.data.key
            const token = response.data.token
            _self._data.upData.token = token
            _self._data.upData.key = key
            resolve(true)
          })
          .catch((err) => {
            console.log(err)
            reject(false)
          })
      })
    },
    emitInput(val) {
      for (let i = 0; i < this.value.length; i++) {
        if (this.value[i] === val) {
          this.value.splice(i, 1)
          break
        }
      }
      this.$emit('input', this.value)
    },
    handleRemoveImage(file) {
      console.log(file)
      this.emitInput(file)
    },
    handleRemove(file, fileList) {
      this.emitInput(file)
    },
    handleSuccess(response, file, fileList) {
      console.log(fileList)
      this.loading = false
      this.fileList = fileList
        .map((file) =>
          file.response
            ? {
              url: this.$store.getters.setting.img_host + file.response.key
            }
            : file
        )
      var value = this.fileList.map((file) => file.url)
      console.log(value)
      this.$emit('input', value)
    },
    handleError(err, file, fileList) {
      console.log(err)
      this.loading = false
      this.$notify({
        title: '失败',
        message: '上传失败:[' + err + ']',
        type: 'error'
      })
    },
    moveLeft(index) {
      if (index === 0) return
      const tmp = this.value[index - 1]
      this.value.splice(index - 1, 1)
      this.value.splice(index, 0, tmp)
      this.$emit('input', this.value)
    },
    moveRight(index) {
      if (index === this.value.length - 1) return
      const tmp = this.value[index]
      this.value.splice(index, 1)
      this.value.splice(index + 1, 0, tmp)
      this.$emit('input', this.value)
    }
  }
}
</script>

<style scoped>
.pre-img {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.pre-img-item {
  position: relative;
  width: 120px;
  height: 120px;
  margin-right: 5px;
  /*margin-left: 5px;*/
}
.pre-img-item img {
  width: 100%;
  height: 100%;
}
.move-control {
  width: 0;
  height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  position: absolute;
  bottom: -2px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0 10px;
  cursor: pointer;
}
.pre-img-item:hover .move-control {
  width: 100%;
  height: auto;
}

.el-upload--picture-card {
  width: 50px;
}

.remove-img {
  background-color: #fef0f0;
  color: #f56c6c;
  position: absolute;
  right: -3px;
  top: -5px;
  cursor: pointer;
}
</style>

<style>
.el-upload--picture-card {
  height: 120px;
  width: 120px;
  line-height: 120px;
}

.el-upload--picture-card i {
  font-size: 20px;
  color: #d4d4d4;
}
</style>