recycle-mobile/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/upload/loading.png"> </image>
        </template>
        <template v-if="!disabled">
          <image class="delImg" mode="aspectFit" src="/static/upload/del.png" @tap.stop="del(index)"> </image>
        </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">
          <image class="uploadImg" mode="aspectFit" src="/static/upload/upload.png"> </image>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
// import { upload } from "@/common/http/upload-file.js";
import api from '@/common/http/'
import { uploadImgs } from '@/common/utils/util.js'
import { b64_md5 } from '@/common/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: {
    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
        return 'file'
      }
      {
        return 'pdf'
      }
    },

    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,
        count:1,
        success: async res => {
          let pathType = this.checkFileType(res.tempFiles[0].name)
          if (pathType !== 'image') {
            return this.$toast('当前格式仅支持jpg, jpeg, png，请检查')
          }
          //  #ifdef H5
          uploadImgs(res.tempFiles[0]).then(res => {
            this.files.push({
              url: res.url
            })
          })
          //  #endif

          // #ifdef MP-WEIXIN

          // #endif
        },
        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);
      }

      .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;
      }
    }
  }
}
</style>