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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
import与export在node.js中的使用详解
Sep 28 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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的开合式多级菜单程序
2006/10/09 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
vue-router单页面路由
2017/06/17 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python函数参数分类原理详解
2020/05/28 Python
中软Java笔试题
2012/11/11 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
音乐课外活动总结
2015/05/09 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书