Spring+Vue UEditor 부 텍스트 를 통합 하여 이미지 첨부 파일 업로드 방법

UEditor 다운로드
https://ueditor.baidu.com/website/download.html
전체 원본 과 JSP 버 전 다운로드

Spring 백 엔 드 통합
1.풀 소스 코드,jsp 디 렉 터 리 에 있 는 자바 소스 코드 를 spring mvc 백 엔 드 로 복사

jsp 디 렉 터 리 에서 자바 소스 코드

통합 spring mvc 백 엔 드
2.config.json 설정
  • 압축 풀기 JSP 버 전
  • jsp 디 렉 터 리 아래 config.json 복사

  • 자바 프로젝트 의 resource 디 렉 터 리 에 넣 습 니 다.여 기 는 ueditorConfig.json 입 니 다.

    config.json 파일 이름 을 설정 합 니 다.여 기 는 ueditorConfig.json 입 니 다.

    3.프로젝트 상수 설정 파일 새 upload.properties 도 resource 디 렉 터 리 에 놓 습 니 다.파일 내용 은 다음 과 같 습 니 다.
    
    #host  
    host=http://localhost:8081/ssm_project
    #         (ip+  )
    uploadHost=http://localhost:8090/
    #          
    imagePath = fileUpload/image/
    #            
    headImgPath = fileUpload/image/headImg/
    #        
    sysUserDefImg = sysUser-default.jpg
    #          
    documentPath = fileUpload/document/
    #          
    soundPath = fileUpload/sound/
    #          
    videoPath = fileUpload/video/
    #ueditor           (    、  、  、     )
    ueditor = fileUpload/ueditor/
    다음 컨트롤 러 가 접근 할 수 있 도록 upload.properties 를 Spring 시작 프로필 application.xml 에 추가 합 니 다.
    
    <!--           -->
    <bean id="configProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
      <property name="locations">
        <list>
          <value>classpath:config.properties</value>
          <value>classpath:redis.properties</value>
          <value>classpath:upload.properties</value>
        </list>
      </property>
    </bean>
    4.도구 류 UploadUtil.java 작성
    
    package cn.lega.common.util;
    
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.util.FileCopyUtils;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.UUID;
    
    public class UploadUtil {
      /**
       *     
       *
       * @param request
       * @param response
       * @param serverPath      :(http://172.16.5.102:8090/)
       * @param path        (        :upload/)
       * @return
       */
      public static String upload(Client client, MultipartFile file, HttpServletRequest request, HttpServletResponse response, String serverPath, String path) {
        //         (    +uuid )
        UUID uuid = UUID.randomUUID();
        Date d = new Date();
        SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
        String formatDate = format.format(d);
        //         
        String extension = FilenameUtils.getExtension(file.getOriginalFilename());
        //    
        String fileName = formatDate + "-" + uuid + "." + extension;
        //    
        String relaPath = path + fileName;
    
    //    String a = serverPath + path.substring(0, path.lastIndexOf("/"));
    //    File file2 = new File(a);
    //    if (!file2.exists()) {
    //      boolean mkdirs = file2.mkdirs();
    //      System.out.println(mkdirs);
    //    }
    
        //    tomcat URL(    )
        String realPath = serverPath + relaPath;
        //       
    //    WebResource resource = client.resource(realPath);
    
        //     post get put(  put  )
    //    try {
    //      resource.put(String.class, file.getBytes());
    //      return fileName + ";" + relaPath + ";" + realPath;
    //    } catch (IOException e) {
    //      e.printStackTrace();
    //      return "";
    //    }
    
        //     /root/fileUpload/ueditor
        String userDir = System.getProperty("user.home");
        String ueditorUploadPath = userDir + File.separator + path;
        File file2 = new File(ueditorUploadPath);
        if (!file2.exists()) {
          file2.mkdirs();
        }
        String newFilePath = ueditorUploadPath + fileName;
    
        //      
        File file3 = new File(newFilePath);
        try {
          FileCopyUtils.copy(file.getBytes(), file3);
          return fileName + ";" + relaPath + ";" + realPath;
        } catch (IOException e) {
          e.printStackTrace();
          return "";
        }
      }
    
      public static String delete(String filePath) {
        try {
          Client client = new Client();
          WebResource resource = client.resource(filePath);
          resource.delete();
          return "y";
        } catch (Exception e) {
          e.printStackTrace();
          return "n";
        }
      }
    }
    5.Controller 클래스 Ueditor Controller.자바 를 작성 하여 전단 에 업로드 인 터 페 이 스 를 제공 합 니 다.
    
    package cn.lega.common.controller;
    
    import cn.lega.common.baidu.ueditor.ActionEnter;
    import cn.lega.common.util.ResponseUtils;
    import cn.lega.common.util.StrUtils;
    import cn.lega.common.util.UploadUtil;
    import cn.lega.common.web.BaseController;
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.sun.jersey.api.client.Client;
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.core.io.ClassPathResource;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.MultipartResolver;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    import java.util.Map;
    
    /**
     *       ueditor       
     *
     * @author silianpan
     */
    @RestController
    @CrossOrigin
    @RequestMapping("/common/ueditor")
    public class UeditorController extends BaseController {
    
      //         
      @Value("#{configProperties['ueditor']}")
      private String ueditor;
    
      @Value("#{configProperties['uploadHost']}")
      private String uploadHost;  //  host  
    
      /**
       * ueditor    (        )
       *
       * @param request
       * @param response
       * @param action
       */
      @ResponseBody
      @RequestMapping(value = "/ueditorUpload.do", method = {RequestMethod.GET, RequestMethod.POST})
      public void editorUpload(HttpServletRequest request, HttpServletResponse response, String action) {
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
    
        try {
          if ("config".equals(action)) {  //       
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
          } else if ("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)) {  //        、  、     
            try {
              MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
              MultipartHttpServletRequest Murequest = resolver.resolveMultipart(request);
              Map<String, MultipartFile> files = Murequest.getFileMap();//     map  
              //      jersey
              Client client = new Client();
    
              for (MultipartFile pic : files.values()) {
                JSONObject jo = new JSONObject();
                long size = pic.getSize();  //     
                String originalFilename = pic.getOriginalFilename(); //       
                if (StrUtils.isEmpty(uploadHost) || uploadHost.equals("default")) {
                  uploadHost = System.getProperty("user.home") + File.separator;
                }
                String uploadInfo = UploadUtil.upload(client, pic, request, response, uploadHost, ueditor);
                if (!"".equals(uploadInfo)) {  //       
                  String[] infoList = uploadInfo.split(";");
                  jo.put("state", "SUCCESS");
                  jo.put("original", originalFilename);//      
                  jo.put("size", size); //     
                  jo.put("title", infoList[1]); //   ,                
                  jo.put("type", FilenameUtils.getExtension(pic.getOriginalFilename())); //      
                  jo.put("url", infoList[2]);//    url                       (http://ip:  /***/***/***.jpg)
                } else {  //       
                }
                ResponseUtils.renderJson(response, jo.toString());
              }
            } catch (Exception e) {
              e.printStackTrace();
            }
          }
        } catch (Exception e) {
        }
      }
    
    //  @RequestMapping(value = "/exec")
    //  public void config(HttpServletRequest request, HttpServletResponse response) {
    //    // response.setContentType("application/json");
    //    String rootPath = request.getSession().getServletContext().getRealPath("/");
    //    response.setHeader("Content-Type" , "text/html");
    //    try {
    //      String exec = new ActionEnter(request, rootPath).exec();
    //      PrintWriter writer = response.getWriter();
    //      writer.write(exec);
    //      writer.flush();
    //      writer.close();
    //    } catch (IOException e) {
    //      e.printStackTrace();
    //    }
    //  }
    
      @RequestMapping(value = "/exec")
      @ResponseBody
      public String exec(HttpServletRequest request) throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        return new ActionEnter(request, rootPath).exec();
      }
    
      @RequestMapping("/ueconfig")
      public void getUEConfig(HttpServletRequest request, HttpServletResponse response) {
        org.springframework.core.io.Resource res = new ClassPathResource("ueditorConfig.json");
        InputStream is = null;
        response.setHeader("Content-Type", "text/html");
        try {
          is = new FileInputStream(res.getFile());
          StringBuffer sb = new StringBuffer();
          byte[] b = new byte[1024];
          int length = 0;
          while (-1 != (length = is.read(b))) {
            sb.append(new String(b, 0, length, "utf-8"));
          }
          String result = sb.toString().replaceAll("/\\*(.|[\\r\
    ])*?\\*/", ""); JSONObject json = JSON.parseObject(result); PrintWriter out = response.getWriter(); out.print(json.toString()); } catch (IOException e) { e.printStackTrace(); } finally { try { is.close(); } catch (IOException e) { e.printStackTrace(); } } } }
    Vue 전단 집적
    1.jsp 버 전 압축 해제,Vue 전단 프로젝트 static 디 렉 터 리 에 복사

    2.전단 상수 설정
    
    //     
    export const STATIC_PATH = process.env.NODE_ENV === 'production' ? './static/' : '/static/'
    // UEditor    ,  UeditorController.java    
    export const UEDITOR_SERVER = API_BASEURL + '/common/ueditor/ueditorUpload.do'
    3.플러그 인 vue-ueditor-wrap 설치
    
    npm install vue-ueditor-wrap
    or
    yarn add vue-ueditor-wrap
    4.구성 요소 작성
    
    <template>
      <div>
        <component
          style="width:100%!important"
          :is="currentViewComp"
          transition="fade"
          transition-mode="out-in"
          :config="ueditorConfig"
          v-model="formData[item.prop]"
          :destroy="true"
          @ready="ueReady">
        </component>
      </div>
    </template>
    <script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    import { STATIC_PATH, UEDITOR_SERVER } from '@/config'
    export default {
    data() {
      return {
       currentViewComp: null,
       ueditorConfig: {
        serverUrl: UEDITOR_SERVER,
        UEDITOR_HOME_URL: STATIC_PATH + 'ueditor1_4_3_3/',
        initialContent: '',
        initialFrameHeight: 400,
        initialFrameWidth: '100%',
        autoHeightEnabled: false
       }
      }
     },
     mounted() {
      this.currentViewComp = VueUeditorWrap
     },
     destroyed() {
      this.currentViewComp = null
     },
     methods: {
      ueReady(editorInstance) {
       this.$nextTick(() => {
        editorInstance.setContent('')
       })
      }
     }
    }
    </script>
    이로써 큰 성 과 를 거 두 었 습 니 다~
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기