一、前言

在使用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,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',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,3,"");
     return;
    }
    //判斷是否有檔案上傳
//    if (!ServletFileUpload.isMultipartContent(request)) {
//     backInfo(response,-1,"");
//     return;
//    }

    // 檢查上傳檔案的目錄
    File uploadDir = new File(path+uploadPath);
    System.out.println(path+uploadPath);
    if (!uploadDir.isDirectory()) {
     if (!uploadDir.mkdirs()) {
      backInfo(response,4,"");
      return;
     }
    }

    // 是否有上傳的許可權
    if (!uploadDir.canWrite()) {
     backInfo(response,5,"");
     return;
    }

    // 新檔名-加13為隨機字串
    String newname = getRandomString(13) +"." + fileSuffix;

    File saveFile = new File(path+uploadPath,newname);

    try {
     file.transferTo(saveFile);

     backInfo(response,true,uploadPath+newname);
    } catch (Exception e) {
     logger.error(e.getMessage(),e);
     backInfo(response,1,"");
     return;
    }
   } else {
    backInfo(response,"");
    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();
  }
 }

第四步：顯示效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。