帝王谷资源网 Design By www.wdxyy.com
一、前言
在使用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(); } }第四步:显示效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月30日
2024年10月30日
- 【原神】V5.1攻略 | 纳西妲一图流攻略
- 群星.2003-重遇80·感动今天的都市人2CD【SONY】【WAV+CUE】
- 希文.2024-沉溺【StreetVoice】【FLAC分轨】
- 韩红.2005-精丫麒麟童】【WAV+CUE】
- 2D像素风日式美学动作游戏《雨魂》将登陆Xbox Series
- 《龙腾世纪4》评分造假?仅将评测代码给好评媒体!
- 《怪猎荒野》推出蜘蛛恐惧症设定 蜘蛛秒变史莱姆
- 《张韶涵单8CD+无损单曲合集》[WAV/FLAC][6.5G]
- 自然声带《大自然 雨声 白噪音》[320K/MP3][135.32MB]
- 自然声带《大自然 雨声 白噪音》[FLAC/分轨][416.27MB]
- 2024年度计划曝光!《暗黑破坏神:不朽》X《魔兽世界》11月开启联动
- 逆流而上!成都Wolves后发制人韧性十足!——《第五人格》2024秋季赛第四周赛报
- 复归之刻,七烛庆典,狼人杀七周年掌门表演赛活动来袭!
- 炉石传说野兽流最终阵容推荐 酒馆战棋野兽流最终阵容图文一览
- 炉石传说野猪人流最终阵容推荐 酒馆战棋野猪人流最终阵容图文一览