refine upload

This commit is contained in:
Pan 2017-04-24 15:13:17 +08:00
parent 47b24ca8b9
commit 9cd68d95ee
9 changed files with 99 additions and 54 deletions

View file

@ -14,6 +14,12 @@
'' + '' +
'</symbol>' + '</symbol>' +
'' + '' +
'<symbol id="icon-quanxian" viewBox="0 0 1024 1024">' +
'' +
'<path d="M818.246893 412.326906l-45.988404 0 0-70.991868c0-152.307871-123.463939-275.778974-275.778974-275.778974s-275.78102 123.471103-275.78102 275.778974l0 70.991868-45.987381 0c-25.379017 0-45.988404 20.566408-45.988404 45.987381l0 455.407074c0 25.428136 20.560268 45.988404 45.988404 45.988404l643.535779 0c25.37697 0 45.988404-20.560268 45.988404-45.988404L864.235296 458.314287C864.190271 432.893314 843.623863 412.326906 818.246893 412.326906L818.246893 412.326906zM680.331823 412.326906 312.62516 412.326906l0-70.991868c0-101.55393 82.344426-183.853331 183.854355-183.853331 101.509928 0 183.853331 82.343403 183.853331 183.853331L680.332846 412.326906 680.331823 412.326906zM680.331823 412.326906" ></path>' +
'' +
'</symbol>' +
'' +
'<symbol id="icon-zonghe" viewBox="0 0 1024 1024">' + '<symbol id="icon-zonghe" viewBox="0 0 1024 1024">' +
'' + '' +
'<path d="M770.56 460.8l250.88 0C998.4 220.16 803.84 25.6 563.2 2.56l0 250.88C668.16 273.92 750.08 355.84 770.56 460.8L770.56 460.8zM770.56 460.8" ></path>' + '<path d="M770.56 460.8l250.88 0C998.4 220.16 803.84 25.6 563.2 2.56l0 250.88C668.16 273.92 750.08 355.84 770.56 460.8L770.56 460.8zM770.56 460.8" ></path>' +

View file

@ -5,14 +5,14 @@
<el-dialog v-model="dialogVisible"> <el-dialog v-model="dialogVisible">
<el-upload <el-upload
class="editor-slide-upload" class="editor-slide-upload"
action="https://upload.qbox.me" action="https://httpbin.org/post"
:data="dataObj" :data="dataObj"
:multiple="true" :multiple="true"
:file-list="fileList" :file-list="fileList"
:show-file-list="true" :show-file-list="true"
list-type="picture-card" list-type="picture-card"
:on-remove="handleRemove" :on-remove="handleRemove"
:before-upload="beforeUpload"> :on-success="handleImageScucess">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
</el-upload> </el-upload>
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
@ -56,6 +56,9 @@
} }
} }
}, },
handleImageScucess(file) {
this.list.push({ url: file.files.file });
},
beforeUpload() { beforeUpload() {
const _self = this; const _self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

View file

@ -100,47 +100,38 @@
this.$emit('input', editor.getContent({ format: 'raw' })); this.$emit('input', editor.getContent({ format: 'raw' }));
}); });
}, },
images_dataimg_filter(img) { // images_dataimg_filter(img) {
setTimeout(() => { // setTimeout(() => {
const $image = $(img); // const $image = $(img);
$image.removeAttr('width'); // $image.removeAttr('width');
$image.removeAttr('height'); // $image.removeAttr('height');
if ($image[0].height && $image[0].width) { // if ($image[0].height && $image[0].width) {
$image.attr('data-wscntype', 'image'); // $image.attr('data-wscntype', 'image');
$image.attr('data-wscnh', $image[0].height); // $image.attr('data-wscnh', $image[0].height);
$image.attr('data-wscnw', $image[0].width); // $image.attr('data-wscnw', $image[0].width);
$image.addClass('wscnph'); // $image.addClass('wscnph');
} // }
}, 0); // }, 0);
return img // return img
}, // },
images_upload_handler(blobInfo, success, failure, progress) { // images_upload_handler(blobInfo, success, failure, progress) {
progress(0); // progress(0);
const token = _this.$store.getters.token; // const token = _this.$store.getters.token;
getToken(token).then(response => { // getToken(token).then(response => {
const url = response.data.qiniu_url; // const url = response.data.qiniu_url;
const formData = new FormData(); // const formData = new FormData();
formData.append('token', response.data.qiniu_token); // formData.append('token', response.data.qiniu_token);
formData.append('key', response.data.qiniu_key); // formData.append('key', response.data.qiniu_key);
formData.append('file', blobInfo.blob(), url); // formData.append('file', blobInfo.blob(), url);
upload(formData).then(() => { // upload(formData).then(() => {
success(url); // success(url);
progress(100); // progress(100);
// setTimeout(() => { // })
// const doc = tinymce.activeEditor.getDoc(); // }).catch(err => {
// const $$ = tinymce.dom.DomQuery; // failure('')
// const $image = $$(doc).find('img[src="' + url + '"]') // console.log(err);
// $image.addClass('wscnph'); // });
// $image.attr('data-wscntype', 'image'); // },
// $image.attr('data-wscnh', $image[0].height || 640);
// $image.attr('data-wscnw', $image[0].width || 640);
// }, 0);
})
}).catch(err => {
failure('出现未知问题,刷新页面,或者联系程序员')
console.log(err);
});
},
setup(editor) { setup(editor) {
editor.addButton('h2', { editor.addButton('h2', {
title: '小标题', // tooltip text seen on mouseover title: '小标题', // tooltip text seen on mouseover

View file

@ -6,8 +6,8 @@
drag drag
:multiple="false" :multiple="false"
:show-file-list="false" :show-file-list="false"
action="https://upload.qbox.me" action="https://httpbin.org/post"
:before-upload="beforeUpload"
:on-success="handleImageScucess"> :on-success="handleImageScucess">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>

View file

@ -6,8 +6,8 @@
drag drag
:multiple="false" :multiple="false"
:show-file-list="false" :show-file-list="false"
action="https://upload.qbox.me" action="https://httpbin.org/post"
:before-upload="beforeUpload"
:on-success="handleImageScucess"> :on-success="handleImageScucess">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">Drag或<em>点击上传</em></div> <div class="el-upload__text">Drag或<em>点击上传</em></div>

View file

@ -6,8 +6,8 @@
drag drag
:multiple="false" :multiple="false"
:show-file-list="false" :show-file-list="false"
action="https://upload.qbox.me" action="https://httpbin.org/post"
:before-upload="beforeUpload"
:on-success="handleImageScucess"> :on-success="handleImageScucess">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
@ -15,7 +15,7 @@
<div class="image-preview image-app-preview"> <div class="image-preview image-app-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div> <div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div>
<img :src="imageUrl+'?imageView2/1/h/180/w/320/q/100'"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i @click="rmImage" class="el-icon-delete"></i>
</div> </div>
@ -23,7 +23,7 @@
</div> </div>
<div class="image-preview"> <div class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div class="image-preview-wrapper" v-show="imageUrl.length>1">
<img :src="imageUrl+'?imageView2/1/w/200/h/200'"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i @click="rmImage" class="el-icon-delete"></i>
</div> </div>
@ -57,8 +57,8 @@
emitInput(val) { emitInput(val) {
this.$emit('input', val); this.$emit('input', val);
}, },
handleImageScucess() { handleImageScucess(file) {
this.emitInput(this.tempUrl) this.emitInput(file.files.file)
}, },
beforeUpload() { beforeUpload() {
const _self = this; const _self = this;

View file

@ -36,7 +36,6 @@ Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]) Vue.filter(key, filters[key])
}); });
function hasPermission(roles, permissionRoles) { function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true; if (roles.indexOf('admin') >= 0) return true;
return roles.some(role => permissionRoles.indexOf(role) >= 0) return roles.some(role => permissionRoles.indexOf(role) >= 0)

View file

@ -54,6 +54,8 @@ const Table = resolve => require(['../views/example/table'], resolve);
const Form1 = resolve => require(['../views/example/form1'], resolve); const Form1 = resolve => require(['../views/example/form1'], resolve);
const Form2 = resolve => require(['../views/example/form2'], resolve); const Form2 = resolve => require(['../views/example/form2'], resolve);
/* permission */
const Permission = resolve => require(['../views/permission/index'], resolve);
/* admin*/ /* admin*/
// const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve); // const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
@ -86,6 +88,19 @@ export default new Router({
{ path: 'dashboard', component: dashboard } { path: 'dashboard', component: dashboard }
] ]
}, },
{
path: '/permission',
component: Layout,
redirect: '/permission/index',
name: '权限测试',
icon: 'quanxian',
meta: { role: ['admin'] },
noDropdown: true,
children: [
{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }
]
},
{ {
path: '/components', path: '/components',
component: Layout, component: Layout,

View file

@ -0,0 +1,31 @@
<template>
<div class="app-container">
<div style='margin-bottom:15px;'>你的权限 {{roles}}</div>
切换权限
<el-radio-group v-model="role">
<el-radio-button label="editor"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default{
data() {
return {
role: ''
}
},
computed: {
...mapGetters([
'roles'
])
},
watch: {
role(val) {
this.$store.commit('SET_ROLES', [val]);
window.location.reload()
}
}
}
</script>