webpackJsonp([31],{

/***/ "BmgF":
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ "D9lA":
/***/ (function(module, exports) {

module.exports = "data:image/jpeg;base64,[encoded data, 8196 characters]"

/***/ }),

/***/ "H3ra":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Upload.vue
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//

/* harmony default export */ var Upload = ({
    name: "upload",
    data: function data() {
        return {
            defaultSrc: __webpack_require__("D9lA"),
            fileList: [],
            imgSrc: "",
            cropImg: "",
            dialogVisible: false
        };
    },

    components: {},
    methods: {
        setImage: function setImage(e) {
            var _this = this;

            var file = e.target.files[0];
            if (!file.type.includes("image/")) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (event) {
                _this.dialogVisible = true;
                _this.imgSrc = event.target.result;
                _this.$refs.cropper && _this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        },
        cropImage: function cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop: function cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded: function imageuploaded(res) {
            console.log(res);
        },
        handleError: function handleError() {
            this.$notify.error({
                title: "上传失败",
                message: "图片上传接口上传失败，可更改为自己的服务器接口"
            });
        }
    },
    created: function created() {
        this.cropImg = this.defaultSrc;
    }
});
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-4aee3039","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/views/Upload.vue
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"crumbs"},[_c('el-breadcrumb',{attrs:{"separator":"/"}},[_c('el-breadcrumb-item',[_c('i',{staticClass:"el-icon-lx-calendar"}),_vm._v(" 表单\n            ")]),_vm._v(" "),_c('el-breadcrumb-item',[_vm._v("图片上传")])],1)],1),_vm._v(" "),_c('div',{staticClass:"container"},[_c('div',{staticClass:"content-title"},[_vm._v("支持拖拽")]),_vm._v(" "),_vm._m(0),_vm._v(" "),_c('el-upload',{staticClass:"upload-demo",attrs:{"drag":"","action":"http://jsonplaceholder.typicode.com/api/posts/","multiple":""},scopedSlots:_vm._u([{key:"tip",fn:function(){return [_c('div',{staticClass:"el-upload__tip"},[_vm._v("只能上传 jpg/png 文件，且不超过 500kb")])]},proxy:true}])},[_c('i',{staticClass:"el-icon-upload"}),_vm._v(" "),_c('div',{staticClass:"el-upload__text"},[_vm._v("\n                将文件拖到此处，或\n                "),_c('em',[_vm._v("点击上传")])])]),_vm._v(" "),_c('div',{staticClass:"content-title"},[_vm._v("支持裁剪")]),_vm._v(" "),_vm._m(1),_vm._v(" "),_c('div',{staticClass:"crop-demo"},[_c('img',{staticClass:"pre-img",attrs:{"src":_vm.cropImg}}),_vm._v(" "),_c('div',{staticClass:"crop-demo-btn"},[_vm._v("\n                选择图片\n                "),_c('input',{staticClass:"crop-input",attrs:{"type":"file","name":"image","accept":"image/*"},on:{"change":_vm.setImage}})])])],1)])}
var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"plugins-tips"},[_vm._v("\n            Element UI自带上传组件。\n            访问地址：\n            "),_c('a',{attrs:{"href":"http://element.eleme.io/#/zh-CN/component/upload","target":"_blank"}},[_vm._v("Element UI Upload")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"plugins-tips"},[_vm._v("\n            vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。\n            访问地址：\n            "),_c('a',{attrs:{"href":"https://github.com/Agontuk/vue-cropperjs","target":"_blank"}},[_vm._v("vue-cropperjs")])])}]
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ var views_Upload = (esExports);
// CONCATENATED MODULE: ./src/views/Upload.vue
function injectStyle (ssrContext) {
  __webpack_require__("BmgF")
}
var normalizeComponent = __webpack_require__("VU/8")
/* script */


/* template */

/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-4aee3039"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
  Upload,
  views_Upload,
  __vue_template_functional__,
  __vue_styles__,
  __vue_scopeId__,
  __vue_module_identifier__
)

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


/***/ })

});