使用百度富文本编辑器(UEditor )进行上传

最新推荐文章于 2024-08-05 17:43:42 发布

UCanCoding

最新推荐文章于 2024-08-05 17:43:42 发布

阅读量1.4k

点赞数

分类专栏： UEditor 文章标签：百度富文本编辑器 UEditor上传 UEditor

本文链接：https://blog.csdn.net/weixin_37519752/article/details/80881089

版权

本文介绍了如何使用百度的富文本编辑器UEditor进行上传操作，包括创建ResultReturn实体、实现上传处理类umeditorUtil，配置jsp中的js代码以及调整config.json设置。

摘要由CSDN通过智能技术生成

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

第一步：首先我们需要一个实体ResultReturn

/** 富文本编辑器返回值*/
public class ResultReturn {
   
    private String state;    // 上传状态SUCCESS 一定要大写
    private String url;      // 上传地址
    private String title;    
    private String original;

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getOriginal() {
        return original;
    }

    public void setOriginal(String original) {
        this.original = original;
    }
}

第二步：其次我们需要一个上传处理类umeditorUtil (不同类型的file我这里是分开写的，其实写在一个方法里就可以了 )

/**
 * <p>Title: umeditorUtil</p> 
 * <p>Description: </p>
 * @author xy
 * @date 2017年11月21日 
 *           富文本编辑器上传，前台直接配置路径就行
 */
@Controller
@RequestMapping("/admin/umeditorUtil")
public class UmeditorUtil {
   
    @Value("#{prop['physical.path']}")
    public String physical_path;
    @Value("#{prop.UPLOAD}")
    public String UPLOAD;
    @Value("#{prop['upload.ueditPic']}")
    public String upload_ueditPic;
    @Value("#{prop['upload.ueditfile']}")
    public String upload_ueditfile;
    @Value("#{prop['upload.ueditVideo']}")
    public String upload_ueditVideo;

    /**
     * <p>Title: uploadImage</p> 
     * <p>Description: 编辑器上传图片</p>  
     * @time 上午9:32:52 
     * @param request
     * @param response
     * @param upfile
     * @return
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
    public String uploadImage(
            HttpServletRequest request,HttpServletResponse response,
            @RequestParam("upfile") MultipartFile upfile) throws IOException {
        ResultReturn returns = null;
        try {
            StringBuffer buffer = new StringBuffer();
            SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
            String fileName = upfile.getOriginalFilename();

            //自动生成文件名
            String newFileName = buffer.append(UUID.randomUUID().toString()).append("_")
                    .append(format.format(new Date())).append(fileName.substring(fileName.lastIndexOf("."))).toString();
            //目录相对路径
            String savePath = "/" + UPLOAD + "/" + upload_ueditPic+ "/" + format.format(new Date());
            //目录绝对路径（存储路径）
            String realPath = physical_path+ "/" + savePath ; 
            //文件访问路径
            String webUrl = savePath + "/" + newFileName;

            //创建目录
            File realfile = new File(realPath);
            if (!realfile.exists()) {