captain-ui/es/idcard-uploader/src/idcard-uploader.js

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import "vant/es/uploader/style";
import _Uploader from "vant/es/uploader";
import forEach from 'lodash/forEach';
import find from 'lodash/find';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-des-uploader"
    }, _vm._l(_vm.rowList, function (row, index) {
      return _c('div', {
        key: index,
        staticClass: "cap-des-uploader__row"
      }, [_c('div', {
        staticClass: "cap-des-uploader__left"
      }, [_c('div', {
        staticClass: "des-upload-title"
      }, [_vm._v("\n        " + _vm._s(row.description.upTitle) + "\n      ")]), _c('van-uploader', {
        attrs: {
          "disabled": !_vm.canUpload,
          "before-read": _vm.beforeReadFile,
          "after-read": _vm.afterReadFile(index)
        }
      }, [_c('div', {
        staticClass: "des-upload-pic",
        class: {
          'des-uploader-uploading': row.uploading
        }
      }, [row.value ? _c('img', {
        attrs: {
          "src": row.value
        }
      }) : _vm._e(), !row.value ? _c('img', {
        attrs: {
          "src": "https://img.yzcdn.cn/public_files/2017/04/07/c1d90dbb69612681830d45e209999286.png"
        }
      }) : _vm._e()])])], 1), _c('div', {
        staticClass: "cap-des-uploader__right"
      }, [_c('div', {
        staticClass: "des-upload-title"
      }, [_vm._v("\n        " + _vm._s(row.description.desTitle) + "\n      ")]), _c('div', {
        staticClass: "des-upload-pic"
      }, [_c('img', {
        attrs: {
          "src": row.description.desImgUrl
        }
      }), row.description.desSubTitle ? _c('div', {
        staticClass: "des-uploader-info"
      }, [_vm._v("\n          " + _vm._s(row.description.desSubTitle) + "\n        ")]) : _vm._e()])])]);
    }), 0);
  },
  name: 'cap-idcard-uploader',
  components: {
    'van-uploader': _Uploader,
    'van-icon': _Icon
  },
  props: {
    value: [Array, Object],
    upload: {
      type: Function,
      required: true
    },
    description: [Array, Object],
    maxLength: {
      type: Number,
      default: 500 * 1024
    }
  },
  data: function data() {
    return {
      // 记录行正在上传的图片, index ->  上传的图片base64
      uploadState: {}
    };
  },
  computed: {
    // 将Value和description组合成 显示的行 列表
    rowList: function rowList() {
      var _this = this;

      if (this.isMultiple) {
        var rows = [];
        forEach(this.value, function (imgObj, index) {
          rows.push({
            value: _this.uploadState[index] || imgObj.thumbURL || imgObj.imgURL || '',
            uploading: !!_this.uploadState[index] || false,
            description: _this.description[index]
          });
        });
        return rows;
      }

      return [{
        value: this.uploadState[0] || this.value.thumbURL || this.value.imgURL,
        uploading: !!this.uploadState[0] || false,
        description: this.description
      }];
    },
    hasUploading: function hasUploading() {
      var finded = find(this.uploadState, function (value) {
        return !!value;
      });
      return !!finded;
    },
    isMultiple: function isMultiple() {
      // 只当当value是一个数组的时候，认为多图
      return this.value instanceof Array;
    },
    canUpload: function canUpload() {
      // 判断当前是否允许上传图片
      return !this.hasUploading;
    }
  },
  methods: {
    beforeReadFile: function beforeReadFile(file) {
      // 拦截非图片的文件，以及大小限制
      return true;
    },
    afterReadFile: function afterReadFile(index) {
      var _this2 = this;

      return function (file) {
        // 如果只能上传单个文件，则先删除原有文件
        if (!_this2.isMultiple) {
          _this2.$emit('input', '');
        } // 上传文件


        _this2.$set(_this2.uploadState, index, file.content);

        _this2.upload(file.file).then(function (img) {
          _this2.uploadedFile(index, img);
        }).catch(function () {
          _this2.uploadState[index] = false;
        });
      };
    },
    deleteImg: function deleteImg(index) {
      if (this.isMultiple) {
        this.value.splice(index, 1);
        this.$emit('input', this.value);
      } else {
        this.$emit('input', '');
      }
    },
    uploadedFile: function uploadedFile(index, img) {
      this.uploadState[index] = false;

      if (this.isMultiple) {
        var copy = this.value.slice(0);
        copy[index] = img;
        this.$emit('input', copy);
      } else {
        this.$emit('input', img);
      }
    }
  }
};