Nginx实现图片回显

在全国项目峰会的时候,自己的项目因为上传的图片没回显还在纳闷怎么弄.....

现在知道了用Nginx反向代理就能够完成此功能。

(一) 反向代理机制

  

  业务需求:

  用户上传的图片和用户请求图片的网址有差别.

  磁盘路径: E:\zhangchaocai\2018\11\02\abc.jpg

  虚拟路径: http://image.jt.com\2018\11\02\abc.jpg

  如何将虚拟路径地址正确的映射到磁盘路径中???



(二) 反向代理说明

   找到一个好用的画图软件,简单易用才是王道。FastStore Capture(小伙伴们,可以试一下)

  

    图解如下:

  1. 用户发起请求,被Nginx中的监听器所拦截.
  2. Nginx通过内部的配置文件,将用户的请求的路径进行中转.转化为数据真实的磁盘路径.根据路径发起http请求.
  3. 从服务器中正确的获取数据后,返回给nginx
  4. Nginx将返回的数据最终返回给用户.

  总结: 反向代理服务器代替用户发起请求,最终将请求结果返回给用户的过程.



(三) Nginx介绍

  百度词条解释:

  Nginx (engine x) 是一个高性能的HTTP反向代理服务,也是一个IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。

  其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日,nginx 1.0.4发布。

Nginx是一款轻量级Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东新浪网易腾讯淘宝等。

  占用内存:1-2M (占用内存极少)

  并发能力:5万/秒(C语言开发), 3万/秒  (并发支持较好)

  免费:不花钱  (重点是不花钱,性能也很棒)

  特点:nginx是软件负载均衡.



(四)Nginx入门小案例

  说明:当访问http://localhost:80时,默认跳转到nginx系统首页.

  4.1 Nginx下载

  网址介绍: http://nginx.org/

  4.2 Nginx安装

   (1).解压nginx文件

      注意事项:1.不要放C盘  2.不要有中文路径

  (2)以管理员身份运行,检测进程项

  

  

  4.3 Nginx命令

  

  说明:执行nginx命令,必须在nginx.exe文件所在目录中执行.

  1. 启动命令  start nginx
  2. 停止命令  nginx -s stop
  3. 重启命令  nginx -s reload

  4.4 Nginx实现图片回显

  

  4.5 修改hosts文件

  

  

  编辑hosts文件

  

  4.6实现效果

  可以看到回显的图片,大功告成!!!

  

  

                

                世界上唯一不劳而获的就是贫穷!!

原文地址:https://www.cnblogs.com/misscai/p/9898220.html

时间: 2024-08-07 19:34:35

Nginx实现图片回显的相关文章

百度WebUploader上传图片,图片回显编辑,查看

       编辑图片,可以删除上次上传的图片,可以新加上传图片 1.首选还是引入css和js(两个css,三个js) 自定义css .webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px);

图片回显

<div> <img src=""> <input type="file" name="name" value="上传图片"> </div> $(function(){ $("input").change(function(){ var obj = $(this); var file = this.files[0]; //如果上传的不是图片就返回,去掉可以上传

关于JS将图片回显问题,将byte[]转化为流,信息填入input框内

1 <script> 2 3 var For_photo = [] 4 var normal_data = new Object(); 5 var Userinfo = JSON.parse(sessionStorage.getItem('Userinformation')); 6 for (var prop in Userinfo) { 7 //$("[name='" + prop + "']").val(ForeignTeachers[prop]);

jquery html5 上传图片并且 图片回显

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="te

ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案

这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix”是前缀的意思 如:我遇到的问题是图片回显地址为: http://localhost:8080/ueditor/jsp/upload/image/...... 而正确的地址是: http://localhost:8080/Spring_3100_Registration_9_bootstrap/ued

如何用input标签上传多个图片并回显

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="uploadImgB

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷

使用Jersey构建图片服务器 有回显图片功能

1.前台界面代码 <form id="jvForm" action="add.do" method="post" enctype="multipart/form-data"> <table> <tr> <td width="20%" class="pn-flabel pn-flabel-h"></td> <td width

图片上传并回显Ajax异步篇

图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormData对象 "FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()用来