图片发布是一对一直播平台源码动态发布的功能之一，那么图片发布是怎样实现的呢？

图片上传和图片加载（静态发布）

o  先创建个静态资源模块

o  实现 文件上载 和显示

o  summernote 上传图片

先创建个静态资源模块

   <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

server.port=8899

spring.web.resources.static-locations=file:D:/resource

这里可通过路径访问文件中信息
如：
http://localhost:8899/a.png

实现 文件上载 和显示

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title> 文件上载 </title>

    <script src="bower_components/jquery/dist/jquery.js"></script>

</head>

<body>

<form id="demoForm" method="post"  enctype="multipart/form-data" action="/upload/file">

    <div>

        <label> 上载文件：

            <input id="imageFile" type="file" name="imageFile">

        </label>

    </div>

    <input type="submit" value=" 提交 ">

</form>

<img src="" id="image">

<script   src="js/utils.js"></script>

<script>

    $(function () {

        // 绑定表单提交事件

        $("#demoForm").submit(function(){

            // 找到文件控件

            let files = document.getElementById("imageFile").files;

            if (files.length>0){

                let file = files[0]

                console.log(file);

                upLoadImage(file);

            }else {

                alert(" 请选择文件 ");

            }

            return false;

        });

        function upLoadImage(file){

            // 创建上载表单数据对象

            let form = new FormData();

            form.append("imageFile",file);

            $.ajax({

                url:"/upload/file",

                method:"POST",

                data:form,

                contentType:false,

                processData:false,

                success:function(r){

                    if (r.code===OK){

                        console.log(r.message);

                        $("#image").attr("src",r.message)

                    }else{

                        alert(r.message)

                    }

                }

            })

        }

    })

</script>

</body>

</html>

   @Value("${straw.redource.path}")

  private   File resourcePath;

    @Value("${straw.resource.host}")

    private String resourceHost;

 @PostMapping("/upload/file")

    public R uploadFile(MultipartFile imageFile) throws IOException {

        // 按照时间创建文件夹

        String path = DateTimeFormatter.ofPattern("yyyy/MM/dd")

                        .format(LocalDate.now());

        File folder  = new File(resourcePath,path);

        folder.mkdirs();

        log.debug(" 上传文件夹为： {}",folder.getAbsolutePath());

        // 获取原始文件名进行截取

        String fileName = imageFile.getOriginalFilename();

        // 截取后缀

        String ext = fileName.substring(fileName.lastIndexOf("."));

        // 创建随即文件名

        String name = UUID.randomUUID().toString()+ext;

        File file = new File(folder,name);

        // 把内容加载到文件里面

        imageFile.transferTo(file);

        // 获取文件存储 URL

        String url =  resourceHost+"/"+path+"/"+name;

        log.debug(" 访问 URL 为： {}",url);

        return R.ok(url);

    }

}

straw.redource.path=file:D:/resource

straw.resource.host=http://localhost:8899

summernote上传图片

<div>

          <!-- 富文本编辑器 start-->

          <label for="summernote"> 问题正文 </label>

          <textarea name="content" id="summernote"></textarea>

          <!-- 富文本编辑器 end-->

        </div>

js 代码

$(document).ready(function() {

    $('#summernote').summernote({

        height: 300,

        tabsize: 2,

        lang: 'zh-CN',

        placeholder: ' 请输入问题的详细描述 ...',

        // 回调方法在选择图片之后自定调用 onImageUpload 方法

        callbacks:{

            onImageUpload:function (files) {

                let  file = files[0];// 找到选定的图片

                console.log(file);

                let form = new FormData();

                form.append("imageFile",file);

                $.ajax({

                    url:"/upload/image" ,

                    method:"POST",

                    data:form,

                    cache:false,

                    contentType:false,

                    processData:false,

                    success:function (r) {

                        if (r.code===OK){

                            // 上传成功后进行加载创建 img 标签

                            var  img= new Image();

                            img.src=r.message;

                            // 将图片添加到 summernote

                            $("#summernote").summernote("insertNode",img);

                        }else{

                            alert(r.message);

                        }

                    }

                });

            }

        }

    });

});

这样，一对一直播平台源码就实现了图片发布。

声明：本文由云豹科技转发自王 zming 博客，如有侵权请联系作者删除