Add vue-core-image-upload

1bdfc745 · lin-xin · f96ba1af · 1bdfc745 · 1bdfc745 · 1bdfc745
8 changed file
--- a/config/index.js
+++ b/config/index.js
@@ -2,37 +2,45 @@
 var path = require('path')

 module.exports = {
-  build: {
-    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    productionSourceMap: true,
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: 8080,
-    autoOpenBrowser: true,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  }
+    build: {
+        env: require('./prod.env'),
+        index: path.resolve(__dirname, '../dist/index.html'),
+        assetsRoot: path.resolve(__dirname, '../dist'),
+        assetsSubDirectory: 'static',
+        assetsPublicPath: '/',
+        productionSourceMap: true,
+        // Gzip off by default as many popular static hosts such as
+        // Surge or Netlify already gzip all static assets for you.
+        // Before setting to `true`, make sure to:
+        // npm install --save-dev compression-webpack-plugin
+        productionGzip: false,
+        productionGzipExtensions: ['js', 'css'],
+        // Run the build command with an extra argument to
+        // View the bundle analyzer report after build finishes:
+        // `npm run build --report`
+        // Set to `true` or `false` to always turn it on or off
+        bundleAnalyzerReport: process.env.npm_config_report
+    },
+    dev: {
+        env: require('./dev.env'),
+        port: 8080,
+        autoOpenBrowser: true,
+        assetsSubDirectory: 'static',
+        assetsPublicPath: '/',
+        proxyTable: {
+            '/api':{
+                target:'http://jsonplaceholder.typicode.com',
+                changeOrigin:true,
+                pathRewrite:{
+                    '^/api':''
+                }
+            }
+        },
+        // CSS Sourcemaps off by default because relative paths are "buggy"
+        // with this option, according to the CSS-Loader README
+        // (https://github.com/webpack/css-loader#sourcemaps)
+        // In our experience, they generally work as expected,
+        // just be aware of this issue when enabling this option.
+        cssSourceMap: false
+    }
 }
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
    <meta charset="utf-8">
    <title>manage-system</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
+</head>
+<body>
+<div id="app"></div>
+</body>
 </html>
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "axios": "^0.15.3",
    "element-ui": "^1.1.6",
    "vue": "^2.1.10",
+    "vue-core-image-upload": "^2.0.5",
    "vue-datasource": "^1.0.4",
    "vue-quill-editor": "^1.1.1",
    "vue-router": "^2.2.0",

--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -11,7 +11,7 @@
                <el-menu-item index="baseform">基本表单</el-menu-item>
                <el-menu-item index="vueeditor">编辑器</el-menu-item>
                <el-menu-item index="markdown">markdown</el-menu-item>
-                <el-menu-item index="2-3">文件上传</el-menu-item>
+                <el-menu-item index="upload">文件上传</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-star-on"></i>UI元素</template>

--- a/src/components/page/Upload.vue
+++ b/src/components/page/Upload.vue
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
+                <el-breadcrumb-item>图片上传</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="plugins-tips">
+            Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
+            访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
+        </div>
+        <img class="pre-img" :src="src" alt="">
+        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
+                               :crop="true"
+                               text="上传图片"
+                               url="/api/posts/"
+                               extensions="png,gif,jpeg,jpg"
+                               v-on:imageuploaded="imageuploaded"></vue-core-image-upload>
+    </div>
+</template>
+
+<script>
+    import VueCoreImageUpload  from 'vue-core-image-upload';
+    export default {
+        data: function(){
+            return {
+                src: '../../../static/img/img.jpg',
+            }
+        },
+        components: {
+            VueCoreImageUpload
+        },
+        methods:{
+            imageuploaded(res) {
+                console.log(res)
+            },
+        }
+    }
+</script>
+
+<style>
+    .pre-img{
+        width:250px;
+        height: 250px;
+        margin-bottom: 20px;
+    }
+    .pure-button{
+        width:150px;
+        height:40px;
+        line-height: 40px;
+        text-align: center;
+        background: #00a2ff;
+        color: #fff;
+        border-radius: 3px;
+    }
+    .g-core-image-corp-container .info-aside{
+        height:45px;
+    }
+</style>
\ No newline at end of file
--- a/src/components/page/VueTable.vue
+++ b/src/components/page/VueTable.vue
@@ -81,7 +81,6 @@
        },
        beforeMount(){
            axios.get('../../../static/data.json').then( (res) => {
-                console.log(res.data)
                this.information = res.data;
            })
        }

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,10 @@ export default new Router({
        {
            path: '/markdown',
            component: resolve => require(['../components/page/Markdown.vue'], resolve)
+        },
+        {
+            path: '/upload',
+            component: resolve => require(['../components/page/Upload.vue'], resolve)
        }
    ]
 })
--- a/static/img/img.jpg
+++ b/static/img/img.jpg