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() {},
 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 || '操作失败');
      }								 
 1/5    1 2 3 4 5 下一页 尾页