wangeditor上传图片回显

1:需要创建一个div来存放

2:我们需要引入wangeditor他自己的js


    
    

3:然后就是js的代码

4:然后是后台的代码

/**
     * 用户投稿文件显示存放
     * @param
     * @param request
     * @return
     */
    @PostMapping("/**/userContribute")
    @ResponseBody
    private ImgInfo  userContribute(@RequestBody MultipartFile file, HttpServletRequest request) {
        ImgInfo imgInfo = new ImgInfo();
        System.out.println("进来了吗");
        Random random = new Random();
        int intRandom = random.nextInt(50000000)+1;
        System.out.println("------>>>"+file);
        String path = request.getSession().getServletContext().getRealPath("/image/contribute");
        boolean multipartContent = ServletFileUpload.isMultipartContent(request);
        System.out.println(multipartContent+"------->");
        //将上传的文件保存
        try {
            //1:获得当前上传文件的输入流
            InputStream inputStream = file.getInputStream();
            //2:获得当前上传文件的输出流\
            //2.1:把路径分出来定义
            String pathFile = path + "\\" +intRandom+file.getOriginalFilename();
            FileOutputStream fileOutputStream = new FileOutputStream(pathFile);//文件名字
            System.out.println(pathFile+"地址");
//            String value = "http://localhost/dynamic/image/contribute/" +file.getOriginalFilename();
            String value = "../image/contribute/" +intRandom+file.getOriginalFilename();
            String[] values = { value };
            imgInfo.setError(0);
            imgInfo.setUrl(values);
            System.out.println(imgInfo);
            //3:执行文件拷贝到存放的位置
            IOUtils.copy(inputStream, fileOutputStream);
            //4:关闭流资源
            inputStream.close();
            fileOutputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return imgInfo;
    }

5:因为imgInfo是我自己定义的一个类

public class ImgInfo implements Serializable {
    private Integer error;
    private String[] url;

    public Integer getError() {
        return error;
    }

    public void setError(Integer error) {
        this.error = error;
    }

    public String[] getUrl() {
        return url;
    }

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

    @Override
    public String toString() {
        return "ImgInfo [error=" + error + ", url=" + Arrays.toString(url) + "]";
    }
}

6:然后我们看看效果和样式吧!

wangeditor上传图片回显_第1张图片

wangeditor上传图片回显_第2张图片 

 wangeditor上传图片回显_第3张图片

 

你可能感兴趣的:(javascript,前端,html)