From 1861d195f7f3a7364c1099356858c94a6c0741e2 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期三, 02 三月 2022 18:11:16 +0800 Subject: [PATCH] 所有功能实现 --- src/components/Administrator/EditLunBo.vue | 95 ++++++++++++++++++++++++++++++++++------------- 1 files changed, 68 insertions(+), 27 deletions(-) diff --git a/src/components/Administrator/EditLunBo.vue b/src/components/Administrator/EditLunBo.vue index 47900d7..b8ae69d 100644 --- a/src/components/Administrator/EditLunBo.vue +++ b/src/components/Administrator/EditLunBo.vue @@ -3,29 +3,23 @@ <el-row><h3 style="margin-top: 0px">{{ $route.query.title }}</h3></el-row> 鏂伴椈鏍囬锛�<el-input v-model="title" placeholder="璇疯緭鍏ユ柊闂绘爣棰�"></el-input><br/><br/> 鍙戝竷鏃ユ湡锛�<el-date-picker format="yyyy 骞� MM 鏈� dd 鏃�" value-format="yyyy-MM-dd" v-model="releaseTime" placeholder="璇烽�夋嫨鏂伴椈鍙戝竷鏃ユ湡"></el-date-picker><br/><br/> - <el-upload - class="upload-demo" - drag - action="http://localhost:8080//news/add" - :on-remove="handleRemove" - multiple> - <i class="el-icon-upload"></i> - <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> - <div class="el-upload__tip" slot="tip">鍙兘涓婁紶jpg/png鏂囦欢锛屼笖涓嶈秴杩�500kb</div> - </el-upload><br/> + <input type="file" @change="chooseFile"/><br/><br/> 鏂伴椈鍐呭锛�<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> <el-row style="margin-top:50px;"> <el-button type="success" @click="submit">鍙戝竷</el-button> </el-row> - 杞挱鍥� </div> </template> <script> -import { add } from '../../api/api' -import { quillEditor } from 'vue-quill-editor' +import { add,fileUpload, login } from '../../api/api' +import {quillEditor,Quill} from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' +import { container, ImageExtend,QuillWatch } from 'quill-image-extend-module' +Quill.register('modules/ImageExtend', ImageExtend) +// axios.defaults.withCredentials = true; + export default { components:{ quillEditor }, data(){ @@ -33,17 +27,58 @@ title:'', //鏍囬鍐呭 releaseTime:'', //鍙戝竷鏃ユ湡 content: '', //鏂伴椈鍐呭 - newsCategoryId:2, + newsCategoryId:45, editorOption: { placeholder: "璇疯緭鍏ユ鏂�", - // editorOption閲屾槸鏀惧浘鐗囦笂浼犻厤缃弬鏁扮敤鐨勶紝渚嬪锛� - action: '/api/product/richtext_img_upload.do', // 蹇呭~鍙傛暟 鍥剧墖涓婁紶鍦板潃 - methods: 'POST', // 蹇呭~鍙傛暟 鍥剧墖涓婁紶鏂瑰紡 - token: '', // 鍙�夊弬鏁� 濡傛灉闇�瑕乼oken楠岃瘉锛屽亣璁句綘鐨則oken鏈夊瓨鏀惧湪sessionStorage - name: 'upload_file', // 蹇呭~鍙傛暟 鏂囦欢鐨勫弬鏁板悕 - size: 10000000, // 鍙�夊弬鏁� 鍥剧墖澶у皬锛屽崟浣嶄负Kb, 1M = 1024Kb - accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 鍙�� 鍙笂浼犵殑鍥剧墖鏍煎紡 + modules: { + ImageExtend: { // 濡傛灉涓嶄綔璁剧疆锛屽嵆{} 鍒欎緷鐒跺紑鍚鍒剁矘璐村姛鑳戒笖浠ase64鎻掑叆 + name: 'file', // 鍥剧墖鍙傛暟鍚� + loading: true, + size: 10, // 鍙�夊弬鏁� 鍥剧墖澶у皬锛屽崟浣嶄负M锛�1M = 1024kb + action:'http://localhost:7070/uploading', + response: (res) => { + console.log(res); + return 'http://localhost:7070/'+res.data + }, + headers: (xhr) => { + // axios.defaults.withCredentials = true; + // xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288') + }, // 鍙�夊弬鏁� 璁剧疆璇锋眰澶撮儴 + sizeError: () => {}, // 鍥剧墖瓒呰繃澶у皬鐨勫洖璋� + start: () => {}, // 鍙�夊弬鏁� 鑷畾涔夊紑濮嬩笂浼犺Е鍙戜簨浠� + end: () => {}, // 鍙�夊弬鏁� 鑷畾涔変笂浼犵粨鏉熻Е鍙戠殑浜嬩欢锛屾棤璁烘垚鍔熸垨鑰呭け璐� + error: () => {}, // 鍙�夊弬鏁� 涓婁紶澶辫触瑙﹀彂鐨勪簨浠� + success: () => {}, // 鍙�夊弬鏁� 涓婁紶鎴愬姛瑙﹀彂鐨勪簨浠� + change: (xhr, formData) => { + // formData.append('token', 'myToken') + } // 鍙�夊弬鏁� 姣忔閫夋嫨鍥剧墖瑙﹀彂锛屼篃鍙敤鏉ヨ缃ご閮紝浣嗘瘮headers澶氫簡涓�涓弬鏁帮紝鍙缃甪ormData + }, + toolbar:{ + container:[ + ['bold', 'italic', 'underline', 'strike'], //鍔犵矖锛屾枩浣擄紝涓嬪垝绾匡紝鍒犻櫎绾� + ['blockquote', 'code-block'], //寮曠敤锛屼唬鐮佸潡 + [{ 'header': 1 }, { 'header': 2 }], // 鏍囬锛岄敭鍊煎鐨勫舰寮忥紱1銆�2琛ㄧず瀛椾綋澶у皬 + [{ 'list': 'ordered'}, { 'list': 'bullet' }], //鍒楄〃 + [{ 'script': 'sub'}, { 'script': 'super' }], // 涓婁笅鏍� + [{ 'indent': '-1'}, { 'indent': '+1' }], // 缂╄繘 + [{ 'direction': 'rtl' }], // 鏂囨湰鏂瑰悜 + [{ 'size': ['small', false, 'large', 'huge'] }], // 瀛椾綋澶у皬 + [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //鍑犵骇鏍囬 + [{ 'color': [] }, { 'background': [] }], // 瀛椾綋棰滆壊锛屽瓧浣撹儗鏅鑹� + [{ 'font': [] }], //瀛椾綋 + [{ 'align': [] }], //瀵归綈鏂瑰紡 + ['clean'], //娓呴櫎瀛椾綋鏍峰紡 + ['image'] //涓婁紶鍥剧墖銆佷笂浼犺棰� + ], + handlers: { + 'image': function () { // 鍔寔鍘熸潵鐨勫浘鐗囩偣鍑绘寜閽簨浠� + QuillWatch.emit(this.quill.id) + } + } + }, + }, } , //缂栬緫鍣ㄦ柊闂诲璞� + fileList:[], } }, created(){ @@ -51,20 +86,26 @@ this.newsCategoryId = this.$route.query.id }, methods:{ - handleRemove(file,fileList){ - console.log(file,fileList); + chooseFile(file) { + this.pictureFile = file.target.files[0]; + console.log(this.pictureFile) + console.log(file); + return false; }, submit(){ + const fd = new FormData(); + fd.append('pictureFile',this.pictureFile); const data = { newsCategoryId:this.newsCategoryId, content:this.content, - title:this.title, releaseTime:this.releaseTime, - pictureFile:this.file, + title:this.title } - add(data).then(res => { + // console.log(999) + add(data,fd).then(res => { console.log(res); - if(res.code !== 200){ + console.log(this.newsCategoryId); + if (res.code != 200) { return this.$message.error('鍙戝竷鏂伴椈澶辫触锛岃閲嶈瘯锛�') }else{ this.$message.success('鏂伴椈鍙戝竷鎴愬姛锛�') -- Gitblit v1.8.0