vue+springboot图片上传和显示的示例代码
1星 90 浏览量
2020-10-15
16:15:36
上传
评论
收藏 81KB PDF 举报 
vue+springboot图片上传和显示的示例代码图片上传和显示的示例代码
主要介绍了vue+springboot图片上传和显示的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者
工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、前言一、前言
在使用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 class="page-container">
<div class="page-title-section">
</div>
<div class="page-content-section">
<div class="page-content-form">
<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() {},
资源评论
Lbb07292021-02-18这个是富文本图片上传，还只是一个pdf的文件，标题也不说清楚，
