在使用spring boot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。
二、环境
前端：vue
前端组件：tinymce
后台：spring boot:2.2.3
三、正文
在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。
是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。
这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。
第一步：集成tinymce组件
<!--引入tinymce组件--> import Tinymce from '@/components/Tinymce'
<!--启用tinymce组件--> <el-form-item> <el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button> </el-form-item>
<!--核心代码--> <template> <div> <div> </div> <div> <div> <el-form ref="dataForm" :model="formData" :rules="formRules" label-width="180px"> <el-form-item> <div> <tinymce v-model="formData.content" :height="300" /> </div> </el-form-item> <el-form-item> <el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button> </el-form-item> </el-form> </div> </div> </div> </template> <script> import Tinymce from '@/components/Tinymce' export default { name:"contentEdit", components: {Tinymce}, data(){ return{ formData:{ content:'', }, } }, created() { }, mounted() {}, activated() {}, deactivated() {}, methods:{ //表单提交 onSubmit(){ this.$refs['dataForm'].validate((valid) => { if (valid) { this.btnLoading = true this.$axios({ url: this.formData.id == '' ? '/products/save' : '/products/edit', method: 'POST', params: this.formData }).then(res => { //处理成功回调 const{ state,result , errmsg} = res.data if( state && state == 1 ){ this.$message.success('操作成功'); this.$router.push( {path:'/products/list'} ) }else{ return this.$message.error(errmsg || '操作失败'); } }).finally(() => { this.btnLoading = false }) } }) }, </script>
<!--Tinymce初始化代码--> initTinymce() { const _this = this window.tinymce.init({ selector: `#${this.tinymceId}`, language: this.languageTypeList['en'], height: this.height, body_class: 'panel-body ', object_resizing: false, toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, menubar: this.menubar, plugins: plugins, end_container_on_empty_block: true, powerpaste_word_import: 'clean', code_dialog_height: 450, code_dialog_width: 1000, advlist_bullet_styles: 'square', advlist_number_styles: 'default', imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], default_link_target: '_blank', link_title: false, nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin //上传图片回调 images_upload_handler:(blobInfo, success, failure) => { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', '/api/file/imageUpload'); xhr.onload = function () { var json; if (xhr.status !== 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); // console.log(json); json.location = util.baseURL + json.data.filename; //在该位置，如果您的后端人员返回的字段已经包含json.location信息，则该处可以省略 if (!json || typeof json.location !== 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); }, init_instance_callback: editor => { if (_this.value) { editor.setContent(_this.value) } _this.hasInit = true editor.on('NodeChange Change KeyUp SetContent', () => { this.hasChange = true this.$emit('input', editor.getContent()) }) }, setup(editor) { editor.on('FullscreenStateChanged', (e) => { _this.fullscreen = e.state }) } // 整合七牛上传 // images_dataimg_filter(img) { // setTimeout(() => { // const $image = $(img); // $image.removeAttr('width'); // $image.removeAttr('height'); // if ($image[0].height && $image[0].width) { // $image.attr('data-wscntype', 'image'); // $image.attr('data-wscnh', $image[0].height); // $image.attr('data-wscnw', $image[0].width); // $image.addClass('wscnph'); // } // }, 0); // return img // }, // images_upload_handler(blobInfo, success, failure, progress) { // progress(0); // const token = _this.$store.getters.token; // getToken(token).then(response => { // const url = response.data.qiniu_url; // const formData = new FormData(); // formData.append('token', response.data.qiniu_token); // formData.append('key', response.data.qiniu_key); // formData.append('file', blobInfo.blob(), url); // upload(formData).then(() => { // success(url); // progress(100); // }) // }).catch(err => { // failure('出现未知问题，刷新页面，或者联系程序员') // console.log(err); // }); // }, }) }, destroyTinymce() { const tinymce = window.tinymce.get(this.tinymceId) if (this.fullscreen) { tinymce.execCommand('mceFullScreen') } if (tinymce) { tinymce.destroy() } }, setContent(value) { window.tinymce.get(this.tinymceId).setContent(value) }, getContent() { window.tinymce.get(this.tinymceId).getContent() }, imageSuccessCBK(arr) { const _this = this arr.forEach(v => { window.tinymce.get(_this.tinymceId).insertContent(`<img src="https://www.jb51.net/${v.url}" >`) }) } }
第二步：后台代码