• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

Spring+Vue整合UEditor富文本实现图片附件上传的方法

java 搞代码 4年前 (2022-01-09) 14次浏览 已收录 0个评论

下载UEditor

https://ueditor.baidu.com/website/download.html

下载完整源码和JSP版本

Spring后端集成

1. 解压完整源码,拷贝jsp目录下的java源码,到spring mvc后端

jsp目录下java源码

集成spring mvc后端

2. 配置config.json

  • 解压JSP版本
  • 拷贝jsp目录下config.json

放到java项目的resource目录下,在这里是ueditorConfig.json

配置config.json文件名称,这里是ueditorConfig.json

3. 项目常量配置文件新建upload.properties,也放在resouce目录下,文件内容如下:

#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中,以便后面Controller访问

<!-- 引入数据库配置文件 -->
<bean id="configProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
  <property name="locations">
    <list>
      <value>classpath:config.properties</value>
      <value>classpath:redis.propert<i>本文来源gaodai$ma#com搞$$代**码)网@</i>ies</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";
    }
  }
}

搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Spring+Vue整合UEditor富文本实现图片附件上传的方法

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址