vue+springboot图片上传和显示的示例代码_springboot上传图片资源-CSDN文库

springboot图片上传

1星 3 浏览量 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组件组件

import Tinymce from '@/components/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() {},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

Lbb0729

2021-02-18

这个是富文本图片上传，还只是一个pdf的文件，标题也不说清楚，

weixin_38556668

粉丝: 5
资源: 981

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip