vue+springboot画像のアップロードと表示の例示的なコード


はじめに
spring bootを使ってバックグラウンドシステムを作って、vueはフロントエンドシステムを作って、お客様にシステムを開発する時、中には写真のアップロードと表示の機能を使いました。
二、環境
  • フロントエンド:vue
  • フロントエンドコンポーネント:tinymce
  • バックグランド:spring boot:2.2.3
  • 三、本文
    お客様がポータル管理システムを開発する時に、コンテンツを編集するために、tinymceコンポーネントを集めました。springbootは他の項目と違っています。 
    tomcatに統合されていますが、ファイルと画像は直接アクセスできません。ですから、私は豊かなテキストエディタを作る時、絵の問題を処理しなければなりません。
    この問題は画像をアップロードするなどの表示機能と似ています。詳細手順コードを下記に記録します。
    第一歩:統合inymceコンポーネント
    
    <!--  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 &nbsp; 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}" >`)
      })
     }
     }
    
    ステップ2:バックグラウンドコード
    
    @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);
      }
     }
    
    
    ステップ3:バックグラウンド処理表示画像
    
     /**
      *       
      * @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();
      }
     }
    
    
    ステップ4:効果を表示する

    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。