微信小程序 springboot nginx 做图片存储 上传 浏览
时间:2020-04-11
本文章向大家介绍微信小程序 springboot nginx 做图片存储 上传 浏览,主要包括微信小程序 springboot nginx 做图片存储 上传 浏览使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序前端-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)
}
})
}
})
原文地址:https://www.cnblogs.com/sxxs/p/12680547.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法