专业html5网站建设,小程序开发平台售后服务怎样,网站建设后期收什么费用,韵达快递小网站怎么做痛点
有时用vscode进行一些测试 请求不同端口服务、或者其他服务接口时时#xff0c;老是会报跨域#xff0c;非常的烦 所有就想用 nginx 进行请求代理#xff0c;来解决这个痛点
nginx 下载地址#xff1a;nginx: download 下载到某一目录#xff1a; window下nginx相关…痛点
有时用vscode进行一些测试 请求不同端口服务、或者其他服务接口时时老是会报跨域非常的烦 所有就想用 nginx 进行请求代理来解决这个痛点
nginx 下载地址nginx: download 下载到某一目录 window下nginx相关命令
//检查 Nginx 配置文件语法是否正确
nginx -t//启动 Nginx 服务
start nginx//停止 Nginx 服务
nginx -s stop//快速关闭并启动 Nginx 服务用于重新加载配置文件
nginx -s reopen
nginx相关配置
D:\ZDS\nginx\nginx-1.24.0\conf 目录下的nginx.conf worker_processes 1;events {worker_connections 1024;
}http {sendfile on;keepalive_timeout 65;server {listen 80;server_name 127.0.0.1;location /service/ {proxy_pass http://127.0.0.1:8080;proxy_set_header Host $proxy_host;}location / {proxy_pass http://127.0.0.1:5501/documentEdit/3.html;}error_page 500 502 503 504 /50x.html;location /50x.html {root html;}}}配置说明 nginx监听本地http://127.0.0.1/服务 80端口如果用户访问这个服务端口会默认代理到http://127.0.0.1:5501/documentEdit/3 .html 服务也就是打开这个服务然后在这个服务中如果请求url中有 ’service‘ 这个字段那么这个url请求 就会被代理到http://127.0.0.1:8080 接口服务 例如在5501的服务中用ajax请求url为 http://127.0.0.1/service/h5/engin?type3projId13025 那么经过代理就会成为 http://localhost:8080/service/h5/engin?type3projId13025 配置详情
worker_processes 1;
这个指令设置了 Nginx 启动时用于处理请求的工作进程数量。在这里设定为 1 个工作进程
events { ... }
这个块中配置了关于连接处理的一些参数包括 worker_connections它定义了每个工作进程可以同时处理的最大连接数 http { ... }
这是 HTTP 服务器的主要配置块包括全局的 HTTP 相关设置
endfile on; 和 keepalive_timeout 65;
sendfile on; 开启了文件的高效传输模式在支持 sendfile 的系统上可以直接在磁盘和网络之间传输数据而不需要在用户空间和内核空间之间来回拷贝。
keepalive_timeout 65; 设置了 keepalive 连接的超时时间即客户端与服务器的长连接的超时时间
server { ... }
这是定义一个 HTTP 服务器的块在这里配置了该服务器的监听地址、名称等信息
listen 80; 和 server_name 127.0.0.1;
listen 80; 定义了服务器监听的端口号。
server_name 127.0.0.1; 指定了该服务器的域名或 IP 地址
location /service/ { ... } 和 location / { ... }
location /service/ { ... } 定义了对应 URL 路径的请求转发规则这里将以 /service/ 开头的请求转发到本地的端口 8080。
location / { ... } 定义了根路径 / 的请求转发规则将请求转发到本地的端口 5501并指定了具体的页面 /documentEdit/3.html。
error_page 500 502 503 504 /50x.html; 和 location /50x.html { ... }
这里定义了当出现 500、502、503、504 错误时显示的错误页面并指定了该错误页面的路径。 配置完之后运行 start nginx 命令然后打开http://127.0.0.1/ 看能不能成功加载页面出来如果成功加载出来了说明配置成功 nginx踩坑
要在 server_name 127.0.0.1 监听的服务中加载到我们需要请求代理的页面也就是加载到vscode用Live Server运行起来的服务这样才能进行代理
前端图片压缩并上传
前端进行图片压缩然后添加到formData中上传到后台服务
base64转Blob
// 数据 URL 转换为 Blob 对象function dataURLtoBlob(dataURL) {// 使用 atob 函数解码 base64 编码的部分split(,)[1] 用于获取逗号后的部分即去掉 data:image/jpeg;base64, 中前面描述图片类型的部分只留下实际的 base64 编码数据var byteString atob(dataURL.split(,)[1]);// 用于存储二进制数据var ab new ArrayBuffer(byteString.length);// 创建了一个无符号 8 位整型数组引用了上面创建的 ArrayBuffer用于处理二进制数据var ia new Uint8Array(ab);// 将 base64 编码转换成二进制数据for (var i 0; i byteString.length; i) {ia[i] byteString.charCodeAt(i);}// 使用 ArrayBuffer 创建了一个新的 Blob 对象表示了转换后的图像数据并指定了其类型为 image/jpegreturn new Blob([ab], { type: image/jpeg });}
完整代码
!DOCTYPE html
htmlheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片上传和压缩/title
/headbodyinput typefile iduploadInput acceptimage/*canvas idcanvas/canvasbutton onclickcompressAndUpload()压缩并上传/buttonscript srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.jsintegritysha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/gcrossoriginanonymous referrerpolicyno-referrer/scriptscript// 获取相关DOM元素var uploadInput document.getElementById(uploadInput);var canvas document.getElementById(canvas);var ctx canvas.getContext(2d);// 监听文件选择事件uploadInput.addEventListener(change, function () {var file uploadInput.files[0]; // 获取用户选择的文件var reader new FileReader();// 文件读取完成时触发reader.onload function (event) {var img new Image();img.onload function () {// 将图片绘制到canvas上var width img.width;var height img.height;var ratio 1;// 若图片宽度或高度超过500像素则进行压缩if (width 500 || height 500) {if (width height) {ratio 500 / width;} else {ratio 500 / height;}}canvas.width width * ratio;canvas.height height * ratio;ctx.drawImage(img, 0, 0, canvas.width, canvas.height);// 数据 URL 转换为 Blob 对象function dataURLtoBlob(dataURL) {// 使用 atob 函数解码 base64 编码的部分split(,)[1] 用于获取逗号后的部分即去掉 data:image/jpeg;base64, 中前面描述图片类型的部分只留下实际的 base64 编码数据var byteString atob(dataURL.split(,)[1]);// 用于存储二进制数据var ab new ArrayBuffer(byteString.length);// 创建了一个无符号 8 位整型数组引用了上面创建的 ArrayBuffer用于处理二进制数据var ia new Uint8Array(ab);// 将 base64 编码转换成二进制数据for (var i 0; i byteString.length; i) {ia[i] byteString.charCodeAt(i);}// 使用 ArrayBuffer 创建了一个新的 Blob 对象表示了转换后的图像数据并指定了其类型为 image/jpegreturn new Blob([ab], { type: image/jpeg });}// 输出压缩后的图片数据var compressedData canvas.toDataURL(image/jpg, 1); // 压缩质量为0.7var formData new FormData();var blob dataURLtoBlob(compressedData);formData.append(image, blob, image.jpg);$.ajax({url: http://127.0.0.1:80/service/h5/engin?type3projId13025,type: POST,data: formData,processData: false,contentType: false,success: function (response) {response JSON.parse(response)},error: function (xhr, status, error) {console.error(error);}});}img.src event.target.result;}reader.readAsDataURL(file); // 以DataURL格式读取文件});/script
/body/html
