Add vue-core-image-upload
lin-xin
parent
f96ba1afac
commit
1bdfc745ef
|
|
@ -2,37 +2,45 @@
|
||||||
var path = require('path')
|
var path = require('path')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
env: require('./prod.env'),
|
env: require('./prod.env'),
|
||||||
index: path.resolve(__dirname, '../dist/index.html'),
|
index: path.resolve(__dirname, '../dist/index.html'),
|
||||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||||
assetsSubDirectory: 'static',
|
assetsSubDirectory: 'static',
|
||||||
assetsPublicPath: '/',
|
assetsPublicPath: '/',
|
||||||
productionSourceMap: true,
|
productionSourceMap: true,
|
||||||
// Gzip off by default as many popular static hosts such as
|
// Gzip off by default as many popular static hosts such as
|
||||||
// Surge or Netlify already gzip all static assets for you.
|
// Surge or Netlify already gzip all static assets for you.
|
||||||
// Before setting to `true`, make sure to:
|
// Before setting to `true`, make sure to:
|
||||||
// npm install --save-dev compression-webpack-plugin
|
// npm install --save-dev compression-webpack-plugin
|
||||||
productionGzip: false,
|
productionGzip: false,
|
||||||
productionGzipExtensions: ['js', 'css'],
|
productionGzipExtensions: ['js', 'css'],
|
||||||
// Run the build command with an extra argument to
|
// Run the build command with an extra argument to
|
||||||
// View the bundle analyzer report after build finishes:
|
// View the bundle analyzer report after build finishes:
|
||||||
// `npm run build --report`
|
// `npm run build --report`
|
||||||
// Set to `true` or `false` to always turn it on or off
|
// Set to `true` or `false` to always turn it on or off
|
||||||
bundleAnalyzerReport: process.env.npm_config_report
|
bundleAnalyzerReport: process.env.npm_config_report
|
||||||
},
|
},
|
||||||
dev: {
|
dev: {
|
||||||
env: require('./dev.env'),
|
env: require('./dev.env'),
|
||||||
port: 8080,
|
port: 8080,
|
||||||
autoOpenBrowser: true,
|
autoOpenBrowser: true,
|
||||||
assetsSubDirectory: 'static',
|
assetsSubDirectory: 'static',
|
||||||
assetsPublicPath: '/',
|
assetsPublicPath: '/',
|
||||||
proxyTable: {},
|
proxyTable: {
|
||||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
'/api':{
|
||||||
// with this option, according to the CSS-Loader README
|
target:'http://jsonplaceholder.typicode.com',
|
||||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
changeOrigin:true,
|
||||||
// In our experience, they generally work as expected,
|
pathRewrite:{
|
||||||
// just be aware of this issue when enabling this option.
|
'^/api':''
|
||||||
cssSourceMap: false
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
12
index.html
12
index.html
|
|
@ -1,11 +1,11 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>manage-system</title>
|
<title>manage-system</title>
|
||||||
</head>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
<body>
|
</head>
|
||||||
<div id="app"></div>
|
<body>
|
||||||
<!-- built files will be auto injected -->
|
<div id="app"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"axios": "^0.15.3",
|
"axios": "^0.15.3",
|
||||||
"element-ui": "^1.1.6",
|
"element-ui": "^1.1.6",
|
||||||
"vue": "^2.1.10",
|
"vue": "^2.1.10",
|
||||||
|
"vue-core-image-upload": "^2.0.5",
|
||||||
"vue-datasource": "^1.0.4",
|
"vue-datasource": "^1.0.4",
|
||||||
"vue-quill-editor": "^1.1.1",
|
"vue-quill-editor": "^1.1.1",
|
||||||
"vue-router": "^2.2.0",
|
"vue-router": "^2.2.0",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<el-menu-item index="baseform">基本表单</el-menu-item>
|
<el-menu-item index="baseform">基本表单</el-menu-item>
|
||||||
<el-menu-item index="vueeditor">编辑器</el-menu-item>
|
<el-menu-item index="vueeditor">编辑器</el-menu-item>
|
||||||
<el-menu-item index="markdown">markdown</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>
|
||||||
<el-submenu index="3">
|
<el-submenu index="3">
|
||||||
<template slot="title"><i class="el-icon-star-on"></i>UI元素</template>
|
<template slot="title"><i class="el-icon-star-on"></i>UI元素</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<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>
|
||||||
|
|
@ -81,7 +81,6 @@
|
||||||
},
|
},
|
||||||
beforeMount(){
|
beforeMount(){
|
||||||
axios.get('../../../static/data.json').then( (res) => {
|
axios.get('../../../static/data.json').then( (res) => {
|
||||||
console.log(res.data)
|
|
||||||
this.information = res.data;
|
this.information = res.data;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,10 @@ export default new Router({
|
||||||
{
|
{
|
||||||
path: '/markdown',
|
path: '/markdown',
|
||||||
component: resolve => require(['../components/page/Markdown.vue'], resolve)
|
component: resolve => require(['../components/page/Markdown.vue'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/upload',
|
||||||
|
component: resolve => require(['../components/page/Upload.vue'], resolve)
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue