一、前言
在使用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 == '' "htmlcode">
<!--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 "wscnph" src="/UploadFiles/2021-04-02/${v.url}">
第二步：后台代码
@RequestMapping(value = "/imageUpload", method = RequestMethod.POST)
public void imageUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
try {
logger.info("上传图片名 :" + file.getOriginalFilename());
if (!file.isEmpty()) {
// Properties p = new Properties();// 属性集合对象
// String path = RedisUtil.class.getClassLoader().getResource("").getPath()+"global.properties";
// FileInputStream fis = new FileInputStream(path);// 属性文件输入流
// p.load(fis);// 将属性文件流装载到Properties对象中
// fis.close();// 关闭流
// String uploadPath = p.getProperty("imgUpload.url");
// //路径名称上加上-年/月日：yyyy/MMdd
// uploadPath += "Uploads/"+new SimpleDateFormat("yyyy").format(new Date())+ "/" +new SimpleDateFormat("MMdd").format(new Date())+"/";
String path= request.getServletContext().getRealPath("/");
path="/Users/qinshengfei/fsdownload";
logger.error("path:"+path);
//路径名称上加上-年/月日：yyyy/MMdd
String uploadPath = File.separatorChar+"Uploads"+File.separatorChar+new SimpleDateFormat("yyyy").format(new Date())+
File.separatorChar +new SimpleDateFormat("MMdd").format(new Date())+File.separatorChar;
// 文件上传大小
long fileSize = 10 * 1024 * 1024;
//判断文件大小是否超过
if (file.getSize() > fileSize) {
backInfo(response, false, 2, "");
return;
}
//获取上传文件名称
String OriginalFilename = file.getOriginalFilename();
//获取文件后缀名：如jpg
String fileSuffix = OriginalFilename.substring(OriginalFilename.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.asList(TypeMap.get("image").split(",")).contains(fileSuffix)) {
backInfo(response, false, 3, "");
return;
}
//判断是否有文件上传
// if (!ServletFileUpload.isMultipartContent(request)) {
// backInfo(response, false, -1, "");
// return;
// }
// 检查上传文件的目录
File uploadDir = new File(path+uploadPath);
System.out.println(path+uploadPath);
if (!uploadDir.isDirectory()) {
if (!uploadDir.mkdirs()) {
backInfo(response, false, 4, "");
return;
}
}
// 是否有上传的权限
if (!uploadDir.canWrite()) {
backInfo(response, false, 5, "");
return;
}
// 新文件名-加13为随机字符串
String newname = getRandomString(13) +"." + fileSuffix;
File saveFile = new File(path+uploadPath, newname);
try {
file.transferTo(saveFile);
backInfo(response, true, 0, uploadPath+newname);
} catch (Exception e) {
logger.error(e.getMessage(), e);
backInfo(response, false, 1, "");
return;
}
} else {
backInfo(response, false, -1, "");
return;
}
} catch (Exception e) {
logger.error(e.getMessage());
}
}
// 返回信息
private void backInfo(HttpServletResponse response, boolean flag, int message, String fileName) {
fileName=fileName.replace("\\","/");
String json = "";
if (flag) {
json = "{ \"status\": \"success";
} else {
json = "{ \"status\": \"error";
}
json += "\",\"fileName\": \"http://127.0.0.1:8090/file/show" + fileName + "\",\"message\": \"" + message + "\"}";
try {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
logger.error(e.getMessage(), e);
}
}
第三步：后台处理显示图片
/**
* 显示单张图片
* @return
*/
@RequestMapping("/show")
public ResponseEntity showPhotos(String fileName){
try {
String path = "/Users/qinshengfei/fsdownload";
// 由于是读取本机的文件，file是一定要加上的， path是在application配置文件中的路径
logger.error("showPhotos:"+path+fileName);
return ResponseEntity.ok(resourceLoader.getResource("file:" + path + fileName));
} catch (Exception e) {
return ResponseEntity.notFound().build();
}
}
第四步：显示效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。