captain-ui/es/img-uploader/src/img-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";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-img-uploader"
    }, [_vm.$slots.header ? [_c('div', {
      staticClass: "cap-img-uploader__header"
    }, [_c('van-uploader', {
      attrs: {
        "disabled": !_vm.canUpload,
        "before-read": _vm.beforeReadFile,
        "after-read": _vm.afterReadFile
      }
    }, [_vm._t("header")], 2)], 1)] : _vm._e(), _vm.paddingImg || _vm.imgList.length > 0 || _vm.$slots.default ? _c('div', {
      staticClass: "cap-img-uploader__imglist"
    }, [_vm._l(_vm.imgList, function (imgObj, index) {
      return [_c('span', {
        key: index,
        staticClass: "cap-img-uploader__img-container"
      }, [_c('span', {
        staticClass: "cap-img-uploader__delete-picture",
        on: {
          "click": function click($event) {
            _vm.deleteImg(index);
          }
        }
      }, [_c('van-icon', {
        attrs: {
          "name": "clear"
        }
      })], 1), _c('img', {
        attrs: {
          "src": imgObj.thumbURL || imgObj.imgURL
        }
      })])];
    }), _vm.paddingImg ? [_c('span', {
      staticClass: "cap-img-uploader__img-container cap-img-uploader__img-container--uploading"
    }, [_c('img', {
      attrs: {
        "src": _vm.paddingImg
      }
    })])] : _vm._e(), _vm.$slots.default ? [_c('van-uploader', {
      attrs: {
        "disabled": !_vm.canUpload,
        "before-read": _vm.beforeReadFile,
        "after-read": _vm.afterReadFile
      }
    }, [_c('span', {
      staticClass: "cap-img-uploader__img-container cap-img-uploader__img-container--uploader"
    }, [_vm._t("default")], 2)])] : _vm._e()], 2) : _vm._e()], 2);
  },
  name: 'cap-img-uploader',
  components: {
    'van-uploader': _Uploader,
    'van-icon': _Icon
  },
  props: {
    value: [Array, Object],
    upload: {
      type: Function,
      required: true
    },
    maxLength: {
      type: Number,
      default: 500 * 1024
    },
    maxSize: {
      type: Number,
      default: 6
    }
  },
  data: function data() {
    return {
      // 正在上传的图片base 64
      paddingImg: ''
    };
  },
  computed: {
    imgList: function imgList() {
      if (this.isMultiple) {
        return this.value;
      }

      return this.value && !this.paddingImg ? [this.value] : [];
    },
    isMultiple: function isMultiple() {
      // 只当当value是一个数组的时候，认为多图
      return this.value instanceof Array;
    },
    canUpload: function canUpload() {
      // 判断当前是否允许上传图片
      if (this.paddingImg) return false;

      if (this.isMultiple) {
        return this.imgList.length < this.maxSize;
      }

      return true;
    }
  },
  methods: {
    beforeReadFile: function beforeReadFile(file) {
      // 拦截非图片的文件，以及大小限制
      return true;
    },
    afterReadFile: function afterReadFile(file) {
      var _this = this;

      // 上传文件
      this.paddingImg = file.content;
      this.upload(file.file).then(function (img) {
        _this.uploadedFile(img);

        _this.$nextTick(function () {
          _this.paddingImg = '';
        });
      });
    },
    deleteImg: function deleteImg(index) {
      if (this.isMultiple) {
        this.value.splice(index, 1);
        this.$emit('input', this.value);
      } else {
        this.$emit('input', null);
      }
    },
    uploadedFile: function uploadedFile(img) {
      if (this.isMultiple) {
        var copy = this.value.slice(0);
        copy.push(img);
        this.$emit('input', copy);
      } else {
        this.$emit('input', img);
      }
    }
  }
};