vue+springboot图片上传和显示的示例代码


Posted in Javascript onFebruary 14, 2020

一、前言

在使用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 || '操作失败');
      }

     }).finally(() => {
      this.btnLoading = false
     })
    }
   })
  },


</script>
<!--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 ? this.toolbar : toolbar,
  menubar: this.menubar,
  plugins: plugins,
  end_container_on_empty_block: true,
  powerpaste_word_import: 'clean',
  code_dialog_height: 450,
  code_dialog_width: 1000,
  advlist_bullet_styles: 'square',
  advlist_number_styles: 'default',
  imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
  default_link_target: '_blank',
  link_title: false,
  nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
  //上传图片回调
  images_upload_handler:(blobInfo, success, failure) => {
    var xhr, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', '/api/file/imageUpload');

    xhr.onload = function () {
     var json;

     if (xhr.status !== 200) {
      failure('HTTP Error: ' + xhr.status);
      return;
     }

     json = JSON.parse(xhr.responseText);
     // console.log(json);
     json.location = util.baseURL + json.data.filename; //在该位置,如果您的后端人员返回的字段已经包含json.location信息,则该处可以省略
     if (!json || typeof json.location !== 'string') {
     failure('Invalid JSON: ' + xhr.responseText);
      return;
     }

     success(json.location);
    };

    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

   xhr.send(formData);

  },
  init_instance_callback: editor => {
   if (_this.value) {
   editor.setContent(_this.value)
   }
   _this.hasInit = true
   editor.on('NodeChange Change KeyUp SetContent', () => {
   this.hasChange = true
   this.$emit('input', editor.getContent())
   })
  },
  setup(editor) {
   editor.on('FullscreenStateChanged', (e) => {
   _this.fullscreen = e.state
   })
  }
  // 整合七牛上传
  // images_dataimg_filter(img) {
  // setTimeout(() => {
  //  const $image = $(img);
  //  $image.removeAttr('width');
  //  $image.removeAttr('height');
  //  if ($image[0].height && $image[0].width) {
  //  $image.attr('data-wscntype', 'image');
  //  $image.attr('data-wscnh', $image[0].height);
  //  $image.attr('data-wscnw', $image[0].width);
  //  $image.addClass('wscnph');
  //  }
  // }, 0);
  // return img
  // },
  // images_upload_handler(blobInfo, success, failure, progress) {
  // progress(0);
  // const token = _this.$store.getters.token;
  // getToken(token).then(response => {
  //  const url = response.data.qiniu_url;
  //  const formData = new FormData();
  //  formData.append('token', response.data.qiniu_token);
  //  formData.append('key', response.data.qiniu_key);
  //  formData.append('file', blobInfo.blob(), url);
  //  upload(formData).then(() => {
  //  success(url);
  //  progress(100);
  //  })
  // }).catch(err => {
  //  failure('出现未知问题,刷新页面,或者联系程序员')
  //  console.log(err);
  // });
  // },
  })
 },
 destroyTinymce() {
  const tinymce = window.tinymce.get(this.tinymceId)
  if (this.fullscreen) {
  tinymce.execCommand('mceFullScreen')
  }

  if (tinymce) {
  tinymce.destroy()
  }
 },
 setContent(value) {
  window.tinymce.get(this.tinymceId).setContent(value)
 },
 getContent() {
  window.tinymce.get(this.tinymceId).getContent()
 },
 imageSuccessCBK(arr) {
  const _this = this
  arr.forEach(v => {
  window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${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=" + 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();
  }
 }

第四步:显示效果

vue+springboot图片上传和显示的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
AngularJS语法详解
Jan 23 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
node+express制作爬虫教程
Nov 11 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
JavaScript简单编程实例学习
Feb 14 #Javascript
JS实现打砖块游戏
Feb 14 #Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 #Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 #Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 #Javascript
Angular之jwt令牌身份验证的实现
Feb 14 #Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
美国羊皮公司:Overland
2018/01/15 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
Python文件操作的面试题
2013/06/22 面试题
司机职责范本
2014/03/08 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
加入学生会自荐书
2015/03/05 职场文书
提档介绍信范文
2015/10/22 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers