微信小程序前端-springboot后端-nginx图片存储

前言

本人小白一名,这是第一次学习微信小程序,特此做个记录。

首先准备nginx做图片存储

选择一个地址存放图片

#我的地址

[root@VM_0_16_centos images]# pwd
/home/photos/images
[root@VM_0_16_centos images]#

然后配置nginx

#编辑配置文件

vi nginx.conf

#加上这个
location /images/ {
root /home/photos/;
autoindex on; #打开目录浏览功能,打开就可以从浏览器访问你的images目录了,注意,不打开也能访问你的图片
}

测试:ip:port/images/images_name.扩展名

然后做springboot文件上传

代码

@RestController
@Slf4j
@Api(tags = "图片上传控制器")
public class UploadLoadController { @Value(value = "${file.path}")
private String filePath; @PostMapping(value = "/upload")
@ApiOperation(value = "上传文件")
public String uploadPhoto(MultipartFile files) throws IOException {
// 获取文件名称
String fileName = files.getOriginalFilename();
//获取文件后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//重新生成文件名
fileName = UUID.randomUUID()+suffixName;
byte[] bytes = files.getBytes();
Path path = Paths.get(filePath + fileName);
Files.write(path,bytes);
return fileName;
}
}

配置文件

file.path=/home/photos/images/

最后弄小程序

 wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths[0]
console.log("路径" + tempFilePaths)
wx.uploadFile({
url: 'http://ip:port/jt/upload',
filePath: tempFilePaths,
name: 'files',
header: {
'content-type': 'multipart/form-data'
},
success(res) {
console.log(res.data)
}
}) }
})

最后浏览

浏览的地址就是ip:port/images/image_name.扩展名

微信小程序 springboot nginx 做图片存储 上传 浏览的更多相关文章

  1. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  2. 微信小程序环境下将文件上传到 OSS

    步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...

  3. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  4. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  5. 微信小程序踩坑日记3——上传照片至服务器

    0. 引言 主要解决将小程序端获取的图片保存在服务器上.亲测可用的服务端脚本. 1. 获取照片 通过wx.chooseImage()方法,获取到图片,使用wx.uploadFile()上传图片. wx ...

  6. 微信小程序云开发-云存储-上传、下载、打开文件文件(word/excel/ppt/pdf)一步到位

    一.wxml文件 <!-- 上传.下载.打开文件一步执行 --> <view class="handle"> <button bindtap=&quo ...

  7. 微信小程序云开发-云存储-上传文件(word/excel/ppt/pdf)到云存储

    说明 word/excel/ppt/pdf是从客户端会话选择文件.使用chooseMessageFile中选择文件. 一.wxml文件 上传按钮,绑定chooseFile <!--上传文件(wo ...

  8. 微信小程序云开发-云存储-上传文件(图片/视频)到云存储 精简代码

    说明 图片/视频这类文件是从客户端会话选择文件. 一.wxml文件添加if切换显示 <!--上传文件到云存储--> <button bindtap="chooseImg&q ...

  9. 基于spring-boot的社区社交微信小程序,适合做脚手架、二次开发

    基于spring-boot的社区社交微信小程序,适合做脚手架.二次开发 代码地址如下:http://www.demodashi.com/demo/13867.html 1 概述 笔者做的一个后端基于s ...

随机推荐

  1. SSH网上商城四

    第29课:10-SSH网上商城:购物模块的实体的封装 1.现在我们要实现购物车的模块,当用户在点击 加入购物车按钮的时候需要跳转到 上面我们需要对购物车的对象进行封装 上面一个商品就对应一个记录项,购 ...

  2. Redis高级特性介绍以及实例分析

    Redis基础类型回顾 转自:http://www.jianshu.com/p/af7043e6c8f9 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的Stri ...

  3. Python实用笔记 (26)面向对象高级编程——定制类

    Python的class允许定义许多定制方法,可以让我们非常方便地生成特定的类.以下是集中常见的定制方法: 怎么才能打印得好看呢?只需要定义好__str__()方法,返回一个好看的字符串就可以了: _ ...

  4. 一个比CBitmap更优秀的类 -- CImage类

    Visual C++的CBitmap类的功能是比较弱的,它只能显示出在资源中的图标.位图.光标以及图元文件的内容,而不像VB中的Image控件可以显示出绝大多数的外部图像文件(BMP.GIF.JPEG ...

  5. Apache POI 操作Excel(3)-- Excel基础

    Excel基本组成 首先在生成Excel前,我们需要了解Excel文件的组织形式.一个Excel文件称为一个workbook,一个workerbook至少包含一个表单(sheet),一个表单有多个行( ...

  6. Centos7安装docker与docker-compose

    Docker是一个开源的容器虚拟化平台 , Docker Compose是一个用来定义和运行复杂应用的Docker工具.使用Compose,你可以在一个文件中定义一个多容器应用,然后使用一条命令来启动 ...

  7. 从Linux源码看Socket(TCP)Client端的Connect

    从Linux源码看Socket(TCP)Client端的Connect 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的 ...

  8. List集合-01.ArrayList

    1.ArrayList 1.1 实现了Access接口 实现标记接口Access有以下特点: 目的是允许通用算法提供良好的性能 当遍历方式不同,速度不同时,通常需要继承这个接口 1.2 ArrayLi ...

  9. request.headers.get头部获取内容的缺失

    1.说明 今天遇到了一个小坑,在做权限控制的时候,用头部传递了参数取名为table_privilege_id, 在本地测试的时候是可以接到这个参数的,但是通过ngxin转发之后,奇怪了,怎么也拿不到这 ...

  10. 脱壳实践之寻找OEP——两次内存断点法

      0x00 前言 对于加壳程序第一件事就是要找到OEP(oringinal Entry point),由于加壳的缘故,当PE文件载入OD或者其他调试软件时进入的的往往是壳程序的入口地址.所以要进行逆 ...