小程序上传多张图片到springboot后台,返回可供访问的图片链接
时间:2022-07-28
本文章向大家介绍小程序上传多张图片到springboot后台,返回可供访问的图片链接,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在做小程序多图片上传到Java后台,Java后台是用springboot写的。也算是踩了不少坑,今天就来带大家来一步步实现小程序端多图片的上传。
首先看效果实现图
小程序端上传成功的回调
Java端接受到图片后的打印
链接可以直接在浏览器里打开查看
其实这两个截图就可以看出,我们图片上传成功了,并且给小程序前端返回了可供访问的图片url。 话不多说,直接看代码。
一,小程序端代码
1,wxml布局文件
其实页面很简单,一个上传按钮,一个选择图片按钮。一定要记得先选择图片,然后再点击图片上传。 2,js文件 再来看下js文件,js文件里最重要的就是uploadFile方法
uploadFile方法里我们请求自己的Java后台接口,进行图片上传。这里有些注意点要给大家说下
- 小程序每次只能上传单张图片
- 如果采用for循环进行上传请求 会出现并行上传,并行上传会出现某一个图片漏传的问题
- 我采用串行的思路,每张图片执行一次上传请求,请求响应成功后在调用请求上传第二张图片,以此类推 。 下面把完整的代码贴出来给到大家
Page({
data: {
img_arr: [],
formdata: '',
},
//点击发布按钮
formSubmit() {
this.uploadFile(0)
},
//上传图片
uploadFile: function (index) {
var that = this
//如果所有图片都已经上传完,就不再往下执行
if (index >= that.data.img_arr.length) {
return
}
wx.uploadFile({
url: 'http://localhost:8080/upload/picture', //自己的Java后台接口地址
filePath: that.data.img_arr[index],
name: 'content',
header: {
"Content-Type": "multipart/form-data",
'accept': 'application/json',
'Authorization': 'okgoodit' //若有token,此处换上你的token,没有的话省略
},
formData: ({ //上传图片所要携带的参数
username: "编程小石头",
password: '2501902696'
}),
success: function (res) {
console.log(`第${index+1}张上传成功`, res)
index++
that.uploadFile(index)
},
fail(res) {
console.log(`第${index+1}张上传失败`, res)
}
})
},
//选择要上传的图片
upimg: function () {
var that = this;
//这里小程序规定最好只能选9张,我这里随便填的3,你也可以自己改
if (this.data.img_arr.length < 3) {
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths)
});
}
})
} else {
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
},
})
代码里注释很清楚了。到这里小程序端基本上完事了。接下来我们看Java后台的实现。
二,Java后台代码
先来看后台代码目录,后台代码很简单,就是一个UploadController
这里的主要实现方法都在uploadPicture
@RequestMapping("/picture")
public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
String filePath = "";
request.setCharacterEncoding("utf-8"); //设置编码
String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
File dir = new File(realPath);
//文件目录不存在,就创建一个
if (!dir.isDirectory()) {
dir.mkdirs();
}
try {
StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
//获取formdata的值
Iterator<String> iterator = req.getFileNames();
String username = request.getParameter("username");
String password = request.getParameter("password");
String timedata = request.getParameter("timedata");
while (iterator.hasNext()) {
MultipartFile file = req.getFile(iterator.next());
String fileName = file.getOriginalFilename();
//真正写到磁盘上
String uuid = UUID.randomUUID().toString().replace("-", "");
String kzm = fileName.substring(fileName.lastIndexOf("."));
String filename = uuid + kzm;
File file1 = new File(realPath + filename);
OutputStream out = new FileOutputStream(file1);
out.write(file.getBytes());
out.close();
filePath = request.getScheme() + "://" +
request.getServerName() + ":"
+ request.getServerPort()
+ "/uploadFile/" + filename;
System.out.println("访问图片路径:" + filePath + "====username:" + username);
}
} catch (Exception e) {
logger.error("", e);
}
return filePath;
}
这里我给大家讲下实现步骤
- 1,springboot对外提供接口供小程序访问
- 2,小程序上传单个图片和额外参数给后台
- 3,后台把图片写到本地,或者图片服务器,然后返回对应的图片url给到小程序端。
通过上图可以看出,Java后台返回了对应的图片url给前端,并且可以拿到小程序前端传的用户名。 我这里把完整的代码贴给大家。
package com.img.demo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.StandardMultipartHttpServletRequest;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.UUID;
/**
* 图片上传
* 编程小石头
*/
@RestController
@RequestMapping("/upload")
public class UploadController {
private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
@RequestMapping("/picture")
public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
String filePath = "";
request.setCharacterEncoding("utf-8"); //设置编码
String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
File dir = new File(realPath);
//文件目录不存在,就创建一个
if (!dir.isDirectory()) {
dir.mkdirs();
}
try {
StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
//获取formdata的值
Iterator<String> iterator = req.getFileNames();
String username = request.getParameter("username");
String password = request.getParameter("password");
String timedata = request.getParameter("timedata");
while (iterator.hasNext()) {
MultipartFile file = req.getFile(iterator.next());
String fileName = file.getOriginalFilename();
//真正写到磁盘上
String uuid = UUID.randomUUID().toString().replace("-", "");
String kzm = fileName.substring(fileName.lastIndexOf("."));
String filename = uuid + kzm;
File file1 = new File(realPath + filename);
OutputStream out = new FileOutputStream(file1);
out.write(file.getBytes());
out.close();
filePath = request.getScheme() + "://" +
request.getServerName() + ":"
+ request.getServerPort()
+ "/uploadFile/" + filename;
System.out.println("访问图片路径:" + filePath + "====username:" + username);
}
} catch (Exception e) {
logger.error("", e);
}
return filePath;
}
}
至于如何创建springboot项目这么基础的知识,我这里就不再给大家讲解了。
- JSP开发过程遇到的中文乱码问题及解决方法
- 求连续操作(登录)数量(次数)最大的记录(用户)
- 使用Topshelf创建自宿主的Windows服务程序
- 如何用ORM支持SQL语句的CASE WHEN?
- 条件表达式的短路求值与函数的延迟求值
- 使用CTE解决复杂查询的问题
- WinDbg调试.NET程序入门
- Release编译模式下,事件是否会引起内存泄漏问题初步研究 疑问:
- 10种简单的Java性能优化学习
- 巧用枚举类型,实现项目的多语言切换
- 影响Java调用性能有哪些因素
- 如何为可扩展系统进行Java Socket编程
- 如何使用Windows卷影拷贝服务恢复文件和文件夹
- .net字符串数组查找方式效率比较
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 开发一个Node命令行小玩具全过程--高颜统计工具
- 消息未读之点不完的小红点(Node+Websocket)
- pkg版本规范管理自动化最佳实践
- 数据库驱动问题:MySQLNonTransientConnectionException
- 喜大普奔,es2019登场
- [译] Object.assign 和 Object Spread 之争, 用谁?
- 急速 debug 实战二(浏览器 - 调试线上篇)
- via the 'serverTimezone' configuration property
- 急速 debug 实战一(浏览器-基础篇)
- MongoDB系列一: Replica Set 集群搭建实战
- 函数式编程看React Hooks(一)简单React Hooks实现
- 函数式编程看React Hooks(二)事件绑定副作用深度剖析
- Vue 开发必须知道的 36 个技巧【近1W字】
- 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》
- 【漫游Github】无编译/无服务器,实现浏览器的 CommonJS 模块化