一对一直播平台源码，如何实现图片发布_云豹一对一图片发送-CSDN博客

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

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

先创建个静态资源模块

   <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 lang="en">
<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 class="form-group">
          <!--富文本编辑器 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博客，如有侵权请联系作者删除