jsm-mall-h5-front/src/components/zj-upload/index.vue

<template>
  <view class="file-upload-container">
    <view class="file-upload-view" v-for="(item, index) in files" :key="index">
      <view class="file-upload-ckick" @click="imgView(index)">
        <image v-if="item.url" mode="aspectFit" :src="imageUrl + item.url" style="width: 100%; height: 100%"> </image>
        <template v-else>
          <image mode="aspectFit" :src="item.loUrl" style="width: 100%; height: 100%"> </image>
          <view class="mack" @tap.stop="() => {}"></view>
          <image @tap.stop="() => {}" class="uploadImg" mode="aspectFit" src="/static/images/upload/loading.png">
          </image>
        </template>
        <template v-if="!disabled">
          <text class="iconfont icon-guanbi1 delImg" @tap.stop="del(index)"></text>
        </template>
      </view>
    </view>
    <template v-if="!disabled">
      <view v-if="count === 0 ? true : count - files.length" class="file-upload-view" @click="upload">
        <view class="file-upload-ckick">
          <text class="iconfont icon-paizhao uploadImg"></text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { uploadImgFull } from '@/common/utils/util.js'
import { b64_md5 } from '@/utils/md5.js'
import loadingImg from './loading.png'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    count: {
      type: Number,
      default: 0
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      imageUrl: this.$imageUrl,
      files: this.setFileVal(this.fileList)
    }
  },
  watch: {
    fileList() {
      this.files = this.setFileVal(this.fileList)
    },
    files: {
      handler(newName, oldName) {
        if (newName.every(item => (item.url ? true : false))) {
          this.$emit(
            'getFiles',
            newName.map(item => item.url)
          )
        }
      },
      deep: true
    }
  },
  methods: {
    setFileVal(arr) {
      return arr.map(item => {
        if (typeof item == 'string') {
          return {
            url: item,
            key: b64_md5(item)
          }
        } else {
          return item
        }
      })
    },
    upload() {
      uni.chooseImage({
        count: this.count === 0 ? 0 : this.count - this.files.length,
        sizeType: ['original'],
        success: async res => {
          const leng = res.tempFiles.length
          for (var file of res.tempFiles) {
            this.files.push({
              url: false,
              key: b64_md5(file.path),
              loUrl: file.path
            })
          }
          for (var i = 0; i < leng; i++) {
            var data = await uploadImgFull(res.tempFiles[i])
            var obj = this.files.find(item => item.key === b64_md5(res.tempFiles[i].path))
            if (obj) {
              obj.url = data.url
              obj.key = b64_md5(data.url)
              delete obj.loUrl
            }
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    del(index) {
      this.files.splice(index, 1)
    },
    imgView(index) {
      var list = this.files.map(item => {
        if (item.url) {
          return this.imageUrl + item.url
        } else {
          return loadingImg
        }
      })
      uni.previewImage({
        current: index,
        urls: list
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.file-upload-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .file-upload-view {
    display: inline-block;
    margin-bottom: 20rpx;

    &:nth-last-of-type(-n + 2) {
      margin-bottom: 0;
    }

    .file-upload-ckick {
      width: 300rpx;
      height: 190rpx;
      background: #ffffff;
      border-radius: 20rpx;
      opacity: 1;
      border: 1rpx solid #e4e4e4;
      box-sizing: border-box;
      padding: 10rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .mack {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: rgba(0, 0, 0, 0.2);
      }

      .icon-paizhao {
        background: $theme-color;
        color: #ffffff;
        font-size: 40rpx;
        border-radius: 50%;
        text-align: center;
        line-height: 80rpx;
      }

      .uploadImg {
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      .delImg {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        z-index: 2;
        width: 40rpx;
        height: 40rpx;
        background: $minor-color;
        color: #ffffff;
        border-radius: 50%;
        text-align: center;
        line-height: 40rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>