captain-ui/es/cert-id-ocr/src/image-uploader.js

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import _extends from "@babel/runtime/helpers/esm/extends";
import "vant/es/uploader/style";
import _Uploader from "vant/es/uploader";
import { upload as _upload } from './utils/upload';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('van-uploader', {
      class: _vm.extraCls,
      attrs: {
        "multiple": false,
        "disabled": _vm.uploading,
        "before-read": _vm.beforeRead,
        "after-read": _vm.afterRead
      }
    }, [_c('div', {
      staticClass: "uploader__content"
    }, [_c('div', {
      class: ['uploader__shape', {
        'uploader__border': !_vm.image.preview && !_vm.image.url
      }]
    }, [_vm.image.preview || _vm.image.url ? _c('div', {
      staticClass: "uploader__preview",
      style: {
        background: "url('" + (_vm.image.preview || _vm.image.url) + "') center / contain no-repeat"
      }
    }) : _c('div', {
      staticClass: "uploader__sample",
      style: {
        background: "url('" + _vm.sample + "') 0 / 100% no-repeat"
      }
    }), _c('span', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.image.done === false,
        expression: "image.done === false"
      }],
      staticClass: "uploader__indicator"
    })]), _c('p', {
      staticClass: "uploader__desc"
    }, [_vm._v("\n      " + _vm._s(_vm.image.done ? '重新拍摄' : '点击拍摄') + "\n      "), _c('span', {
      staticClass: "uploader__label"
    }, [_vm._v(_vm._s(_vm.label))])])])]);
  },
  name: 'image-uploader',
  components: {
    'van-uploader': _Uploader
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    extraCls: {
      type: String,
      default: ''
    },
    sample: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    maxSize: {
      type: Number,
      default: Number.MAX_VALUE
    },
    tokenUrl: {
      type: String,
      required: true
    }
  },
  data: function data() {
    var value = this.value;
    return {
      image: {
        url: value.replace(/^http:/i, '')
      },
      uploading: false
    };
  },
  watch: {
    value: function value(val, old) {
      if (val !== old) {
        var url = this.image.url;

        if (val !== url) {
          this.image = {
            url: val
          };
        }
      }
    }
  },
  methods: {
    upload: function upload(image) {
      var _this = this;

      var imageFile = image.file;
      var tokenUrl = this.tokenUrl;

      var copy = _extends({}, image);

      this.uploading = true;

      _upload([imageFile], tokenUrl).then(function (_ref) {
        var url = _ref[0];

        if (url === '') {
          _this.image = {};
          _this.uploading = false;
          return _Toast('图片上传失败');
        }

        copy.done = true;
        copy.url = url;
        _this.image = copy;
        _this.uploading = false;

        _this.$emit('change', url);
      });
    },
    beforeRead: function beforeRead(image) {
      var maxSize = this.maxSize;
      var overSize = image.size > maxSize;

      if (overSize) {
        var megabyte = (maxSize / 1024 / 1024).toFixed(1);

        _Toast("\u56FE\u7247\u5C3A\u5BF8\u8D85\u8FC7\u9650\u5236\uFF0C\u6700\u5927\u4E3A" + megabyte + "M");

        return false;
      }

      return true;
    },
    afterRead: function afterRead(image) {
      var tokenUrl = this.tokenUrl;
      this.image = {
        preview: image.content,
        file: image.file,
        done: false
      };
      this.upload(this.image, tokenUrl);
    }
  }
};