• 分布式开发-文件上传到文件服务器

    分服务器上传作用:

    •     数据库服务器：运行我们的数据库
    •     缓存和消息服务器：负责处理大并发访问的缓存和消息
    •     文件服务器：负责存储用户上传文件的服务器。
    •     应用服务器：负责部署我们的应用

        在实际开发中，我们会有很多处理不同功能的服务器。(注意：此处说的不是服务器集群）

        总结：分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。

    分服务器工作示意图

    单独解压一个Tomcat作为文件服务器(也可以在虚拟机中安装tomcat,模拟新服务器)

    1.设置远程服务器端口号

     

     2.远程服务器中设置非只读

     3.webapps下创建一个upload目录

     4.启动测试

     

    5.项目中导入依赖

    1. <dependency>
    2.   <groupId>com.sun.jerseygroupId>
    3.   <artifactId>jersey-clientartifactId>
    4.   <version>1.19version>
    5. dependency>

    6.controller代码

    1. @Controller
    2. public class FileUploadController {
    3.     // 文件存储位置
    4.     private final static String FILESERVER="http://192.168.8.109:8090/upload/";
    5.     @ResponseBody
    6.     @RequestMapping("fileUpload.do")
    7.     public Map fileUpload(MultipartFile headPhoto, HttpServletRequest req) throws IOException {
    8.         Map map=new HashMap<>();
    9.         // 获取文件名
    10.         String originalFilename = headPhoto.getOriginalFilename();
    11.         // 避免文件名冲突,使用UUID替换文件名
    12.         String uuid = UUID.randomUUID().toString();
    13.         // 获取拓展名
    14.         String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
    15.         // 新的文件名
    16.         String newFileName=uuid.concat(extendsName);
    17.         // 创建 sun公司提供的jersey包中的client对象
    18.         Client client=Client.create();
    19.         WebResource resource = client.resource(FILESERVER + newFileName);
    20.         //  文件保存到另一个服务器上去了
    21.         resource.put(String.class, headPhoto.getBytes());
    22.         // 上传成功之后,把文件的名字和文件的类型返回给浏览器
    23.         map.put("message", "上传成功");
    24.         map.put("newFileName",newFileName);
    25.         map.put("filetype", headPhoto.getContentType());
    26.         return map;
    27.     }
    28. }

    7.页面代码(使用异步请求)

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>Titletitle>
    5.     <style>
    6.         .progress {
    7.             width: 200px;
    8.             height: 10px;
    9.             border: 1px solid #ccc;
    10.             border-radius: 10px;
    11.             margin: 10px 0px;
    12.             overflow: hidden;
    13.         }
    14.         /* 初始状态设置进度条宽度为0px */
    15.         .progress > div {
    16.             width: 0px;
    17.             height: 100%;
    18.             background-color: yellowgreen;
    19.             transition: all .3s ease;
    20.         }
    21.     style>
    22.     <script type="text/javascript" src="js/jquery.min.js">script>
    23.     <script type="text/javascript">
    24.         $(function(){
    25.             $("#uploadFile").click(function(){
    26.                 // 获取要上传的文件
    27.                 var photoFile =$("#photo")[0].files[0]
    28.                 if(photoFile==undefined){
    29.                     alert("您还未选中文件")
    30.                     return;
    31.                 }
    32.                 // 将文件装入FormData对象
    33.                 var formData =new FormData();
    34.                 formData.append("headPhoto",photoFile)
    35.                 // ajax向后台发送文件
    36.                 $.ajax({
    37.                     type:"post",
    38.                     data:formData,
    39.                     url:"fileUpload.do",
    40.                     processData:false,
    41.                     contentType:false,
    42.                     success:function(result){
    43.                         // 接收后台响应的信息
    44.                         alert(result.message)
    45.                         // 图片回显
    46.                         $("#headImg").attr("src","http://192.168.8.109:8090/upload/"+result.newFileName);
    47.                         // 将文件类型和文件名放入form表单
    48.                         $("#photoInput").val(result.newFileName)
    49.                         $("#filetypeInput").val(result.filetype)
    50.                     },
    51.                     xhr: function() {
    52.                         var xhr = new XMLHttpRequest();
    53.                         //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
    54.                         xhr.upload.addEventListener('progress', function (e) {
    55.                             //loaded代表上传了多少
    56.                             //total代表总数为多少
    57.                             var progressRate = (e.loaded / e.total) * 100 + '%';
    58.                             //通过设置进度条的宽度达到效果
    59.                             $('.progress > div').css('width', progressRate);
    60.                         })
    61.                         return xhr;
    62.                     }
    63.                 })
    64.             })
    65.         })
    66.     script>
    67. head>
    68. <body>
    69.     <form action="addPlayer" method="get">
    70.         <p>账号<input type="text" name="name">p>
    71.         <p>密码<input type="text" name="password">p>
    72.         <p>昵称<input type="text" name="nickname">p>
    73.         <p>头像:
    74.             <br/>
    75.             <input id="photo" type="file">
    76.             <%--图片回显--%>
    77.             <br/>
    78.             <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
    79.             <br/>
    80.            <%--进度条--%>
    81.             <div class="progress">
    82.                 <div>div>
    83.             div>
    84.             <a id="uploadFile" href="javascript:void(0)">立即上传a>
    85.             <%--使用隐藏的输入框存储文件名称和文件类型--%>
    86.             <input id="photoInput"  type="hidden" name="photo" >
    87.             <input id="filetypeInput"  type="hidden" name="filetype">
    88.         p>
    89.         <p><input type="submit" value="注册">p>
    90.     form>
    91. body>
    92. html>

  • 相关阅读:
    Docker---Docker-compose 安装部署 zentao 禅道
    刷题记录（NC16664 [NOIP2004]合唱队形，NC235954 滑雪，NC235948 最大子串和，NC235624 牛可乐和最长公共子序列）
    Flutter混编之路IOS插件0基础开发（mac环境）
    数字信号处理——CFAR检测器设计（1）
    排序算法的奥秘：JAVA中的揭秘与实现
    具有 1 个射频链的 OFDM-MIMO 系统的波束训练（Matlab代码实现）
    数据操作（CUD）
    【selenium】 元素定位
    网络安全（黑客）自学
    「网页开发｜前端开发｜Vue」04 快速掌握开发网站需要的Vue基础知识
  • 原文地址：https://blog.csdn.net/listeningdu/article/details/128138093