uk_front_build/.nuxt/dist/server/components/image-upload.js

exports.ids = [15];
exports.modules = {

/***/ 206:
/***/ (function(module, exports) {

// Exports
module.exports = {

};


/***/ }),

/***/ 228:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ImageUpload_vue_vue_type_style_index_0_id_596f82bc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(206);
/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ImageUpload_vue_vue_type_style_index_0_id_596f82bc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ImageUpload_vue_vue_type_style_index_0_id_596f82bc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ImageUpload_vue_vue_type_style_index_0_id_596f82bc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ImageUpload_vue_vue_type_style_index_0_id_596f82bc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));


/***/ }),

/***/ 245:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/ImageUpload.vue?vue&type=template&id=596f82bc&scoped=true
var render = function render() {
  var _vm = this,
    _c = _vm._self._c;
  return _c('div', {
    staticClass: "com-image-upload"
  }, [_c('draggable', {
    staticClass: "flex start wrap",
    attrs: {
      "draggable": ".image-item"
    },
    on: {
      "end": _vm.end
    },
    model: {
      value: _vm.imageList,
      callback: function ($$v) {
        _vm.imageList = $$v;
      },
      expression: "imageList"
    }
  }, [_vm._l(_vm.imageList, function (item, index) {
    return _c('div', {
      key: item.uid || index,
      staticClass: "image-item flex",
      style: {
        width: _vm.width,
        height: _vm.height
      }
    }, [_c('img', {
      attrs: {
        "src": item.url,
        "alt": ""
      }
    }), _vm._v(" "), _c('div', {
      staticClass: "action-area flex center"
    }, [!_vm.disablePreview ? _c('span', {
      staticClass: "action-icon",
      on: {
        "click": function ($event) {
          return _vm.handlePictureCardPreview(item);
        }
      }
    }, [_c('i', {
      staticClass: "el-icon-zoom-in"
    })]) : _vm._e(), _vm._v(" "), _c('span', {
      staticClass: "action-icon",
      on: {
        "click": function ($event) {
          return _vm.handleRemove(index);
        }
      }
    }, [_c('i', {
      staticClass: "el-icon-delete"
    })])])]);
  }), _vm._v(" "), _c('el-progress', {
    directives: [{
      name: "show",
      rawName: "v-show",
      value: _vm.loading,
      expression: "loading"
    }],
    staticStyle: {
      "margin": "8px"
    },
    attrs: {
      "type": "circle",
      "percentage": _vm.uploadPercent,
      "width": Number(_vm.width.slice(0, _vm.width.length - 2))
    }
  }), _vm._v(" "), _c('div', {
    staticClass: "upload-wrap",
    class: {
      hide: _vm.loading || _vm.imageList.length >= _vm.max
    },
    style: {
      width: _vm.width,
      height: _vm.height
    }
  }, [_c('el-upload', {
    ref: "pictureUpload",
    staticClass: "custom-upload-item",
    attrs: {
      "multiple": true,
      "limit": _vm.max,
      "action": "",
      "drag": "",
      "accept": ".jpg,.png,.jpeg",
      "list-type": "picture-card",
      "file-list": _vm.imageList,
      "show-file-list": false,
      "auto-upload": false,
      "on-remove": _vm.handleRemove,
      "on-preview": _vm.handlePictureCardPreview,
      "on-change": (file, fileList) => {
        _vm.handleUpload(file, fileList);
      }
    }
  }, [_c('i', {
    staticClass: "el-icon-plus avatar-uploader-icon"
  })])], 1)], 2), _vm._ssrNode(" "), _c('el-dialog', {
    attrs: {
      "visible": _vm.imageDialogVisible
    },
    on: {
      "update:visible": function ($event) {
        _vm.imageDialogVisible = $event;
      }
    }
  }, [_c('img', {
    attrs: {
      "width": "100%",
      "src": _vm.imageUrl,
      "alt": ""
    }
  })])], 2);
};
var staticRenderFns = [];

// CONCATENATED MODULE: ./components/ImageUpload.vue?vue&type=template&id=596f82bc&scoped=true

// EXTERNAL MODULE: external "vuedraggable"
var external_vuedraggable_ = __webpack_require__(143);
var external_vuedraggable_default = /*#__PURE__*/__webpack_require__.n(external_vuedraggable_);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/ImageUpload.vue?vue&type=script&lang=js

// import { common } from '@/api'

/* harmony default export */ var ImageUploadvue_type_script_lang_js = ({
  name: 'ImageUpload',
  components: {
    draggable: external_vuedraggable_default.a
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    max: {
      type: Number,
      default: 16
    },
    disablePreview: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    }
  },
  data() {
    return {
      // 组件内部数据.
      imageList: [],
      loading: false,
      uploadPercent: 0,
      imageDialogVisible: false,
      // 预览大图的url, 每次点击都会更新
      imageUrl: ''
    };
  },
  computed: {
    fulled() {
      return 0;
    }
  },
  watch: {
    list() {
      this.imageList = JSON.parse(JSON.stringify(this.list));
    }
  },
  mounted() {
    this.updateList();
  },
  methods: {
    handleUpload(file, fileList) {
      this.fileList = [];
      if (file.status === 'ready') {
        this.loading = true;
        const interval = setInterval(() => {
          if (this.uploadPercent >= 99) {
            clearInterval(interval);
            return;
          }
          this.uploadPercent += 1; // 进度条进度
        }, 100);
      }
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('file', file.raw);
      });
      formData.append('type', 1);
      this.$axios.post(`/uk-api/user_base/imagesUpload`, formData).then(response => {
        if (response.result.code === 200) {
          this.imageList.push({
            url: response.result.data,
            uid: file.uid
          });
          this.updateList();
          return;
        }
        this.$message({
          message: response.result.message,
          type: 'warning'
        });
      }).catch(error => {
        console.log(error, 'component upload image error');
        this.$message.error(error.response.data.msg);
      }).finally(() => {
        this.loading = false;
        // 进度条恢复到初始状态
        this.uploadPercent = 0;
      });
    },
    handleRemove(index) {
      this.imageList.splice(index, 1);
      this.updateList();
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url;
      this.imageDialogVisible = true;
    },
    // 每次更新imageList后手动更新父组件的数据, 不能用watch自动更新, 因为同时要watch prop值更新iamgeList, 同时watch会死循环.
    // 直接把prop数据绑定到dragable 和 el-upload的话vue和eslint会报错, 也可能造成调试困难
    updateList() {
      this.$emit('update:list', JSON.parse(JSON.stringify(this.imageList)));
    },
    end() {
      this.updateList();
    }
  }
});
// CONCATENATED MODULE: ./components/ImageUpload.vue?vue&type=script&lang=js
 /* harmony default export */ var components_ImageUploadvue_type_script_lang_js = (ImageUploadvue_type_script_lang_js); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);

// CONCATENATED MODULE: ./components/ImageUpload.vue



function injectStyles (context) {
  
  var style0 = __webpack_require__(228)
if (style0.__inject__) style0.__inject__(context)

}

/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  components_ImageUploadvue_type_script_lang_js,
  render,
  staticRenderFns,
  false,
  injectStyles,
  "596f82bc",
  "7f6e537e"
  
)

/* harmony default export */ var ImageUpload = __webpack_exports__["default"] = (component.exports);

/***/ })

};;
//# sourceMappingURL=image-upload.js.map