From aa9f8d3716ec7906e3b51cba399a9a6c82c83253 Mon Sep 17 00:00:00 2001 From: ronger Date: Thu, 13 Jan 2022 22:15:48 +0800 Subject: [PATCH] =?UTF-8?q?:bug:=20=E6=A0=87=E7=AD=BE=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/admin/tag/post/_tag_id.vue | 199 +++++++++++++++++++++++-------- 1 file changed, 147 insertions(+), 52 deletions(-) diff --git a/pages/admin/tag/post/_tag_id.vue b/pages/admin/tag/post/_tag_id.vue index 790e21f..3ccb0f5 100644 --- a/pages/admin/tag/post/_tag_id.vue +++ b/pages/admin/tag/post/_tag_id.vue @@ -29,6 +29,64 @@ + + + + + + + +
+ +
+ + + + + + +

{{ tag.tagTitle }}

+ + + +
{{ tag.tagDescription }}
+ + + +
+ + + + + +
+ 上传 +
+ + 重置 + 裁剪 + + * + 上传图片调整至最佳效果后,请点击裁剪按钮截取 + + + import Vue from "vue"; +import {mapState} from 'vuex'; +import VueCropper from "vue-cropperjs"; +import 'cropperjs/dist/cropper.css'; export default { name: "PostTag", + components: { + VueCropper + }, validate({params, store}) { if (typeof params.tag_id === 'undefined') { return true; @@ -77,10 +141,11 @@ export default { ]) }, computed: { - uploadHeaders() { - let token = this.$store.state.uploadHeaders; - return {'X-Upload-Token': token} - } + ...mapState({ + uploadHeaders: state => { + return {'X-Upload-Token': state.uploadHeaders} + } + }) }, data() { return { @@ -93,6 +158,7 @@ export default { loading: false, isEdit: false, tag: {}, + autoCrop: true, notificationFlag: true } }, @@ -100,44 +166,44 @@ export default { _initEditor(data) { let _ts = this; - let toolbar = [ - 'emoji', - 'headings', - 'bold', - 'italic', - 'strike', - 'link', - '|', - 'list', - 'ordered-list', - 'check', - 'outdent', - 'indent', - '|', - 'quote', - 'line', - 'code', - 'inline-code', - 'insert-before', - 'insert-after', - '|', - 'upload', - // 'record', - 'table', - '|', - 'undo', - 'redo', - '|', - 'edit-mode', - { - name: 'more', - toolbar: [ - 'fullscreen', - 'both', - 'preview', - 'info' - ], - }] + let toolbar = [ + 'emoji', + 'headings', + 'bold', + 'italic', + 'strike', + 'link', + '|', + 'list', + 'ordered-list', + 'check', + 'outdent', + 'indent', + '|', + 'quote', + 'line', + 'code', + 'inline-code', + 'insert-before', + 'insert-after', + '|', + 'upload', + // 'record', + 'table', + '|', + 'undo', + 'redo', + '|', + 'edit-mode', + { + name: 'more', + toolbar: [ + 'fullscreen', + 'both', + 'preview', + 'info' + ], + }] return new Vue.Vditor(data.id, { toolbar, mode: 'sv', @@ -180,9 +246,7 @@ export default { url: this.tokenURL.URL, linkToImgUrl: this.tokenURL.linkToImageURL, token: this.tokenURL.token, - filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, ''). - replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, ''). - replace('/\\s/g', '') + filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '') }, height: data.height, counter: 102400, @@ -211,11 +275,24 @@ export default { if (!(isJPG || isPNG)) { this.$message.error('上传图标只能是 JPG 或者 PNG 格式!'); + return false; } if (!isLt2M) { this.$message.error('上传图标大小不能超过 2MB!'); + return false; + } + + this.fileToBase64(file); + return false; + }, + fileToBase64(file) { + let _ts = this; + let reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = function () { + _ts.$set(_ts, 'tagIconPath', this.result); + _ts.$refs.cropper.replace(this.result); } - return (isJPG || isPNG) && isLt2M; }, async updateTag() { let _ts = this; @@ -240,6 +317,24 @@ export default { _ts.$set(_ts, 'notificationFlag', false); } }) + }, + reset() { + this.$refs.cropper.reset(); + }, + // get image data for post processing, e.g. upload or setting image src + cropImage() { + let _ts = this; + try { + _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL(); + let tag = _ts.tag; + tag.tagIconPath = _ts.cropImg; + _ts.$set(_ts, 'tag', tag); + _ts.$set(_ts, 'tagIconPath', _ts.cropImg); + _ts.$message.success('已裁剪 !'); + } catch (e) { + _ts.$message.error('图片获取失败 !'); + return; + } } }, beforeRouteLeave(to, from, next) { @@ -275,14 +370,14 @@ export default { return '关闭提示'; }); let _ts = this; - this.$store.commit('setActiveMenu', 'admin-tag-post'); - this.$axios.$get('/api/upload/simple/token').then(function (res) { + _ts.$store.commit('setActiveMenu', 'admin-tag-post'); + _ts.$axios.$get('/api/upload/simple/token').then(function (res) { if (res) { _ts.$store.commit('setUploadHeaders', res.uploadToken); _ts.$set(_ts, 'tokenURL', { - token: responseData.uploadToken || '', - URL: responseData.uploadURL || '', - linkToImageURL: responseData.linkToImageURL || '' + token: res.uploadToken || '', + URL: res.uploadURL || '', + linkToImageURL: res.linkToImageURL || '' }) } }); @@ -313,5 +408,5 @@ export default {