小程序上传多张图片到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项目这么基础的知识,我这里就不再给大家讲解了。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
看了这篇,我确定你已经彻底搞懂Java的继承了
看了这篇,我确定你已经彻底搞懂Java的继承了 遇到认真的读者是作者的一种幸运,真的,上一篇接口推送后,有好几个读者留言说,“二哥,你有一处内容需要修正,应该是接口中不能有 private 和 protected 修饰的方法。”说实话,看到这样的留言,我内心是非常欣慰的,因为你投出去的一块石头在水面上激起了一串美丽的涟漪。 在 Java 中,一个类可以继承另外一个类或者实现多个接口,我想这一点,大部分的读者应该都知道了。还有一点,我不确定大家是否知道,就是一个接口也可以继承另外一个接口,就像下面这样: publicinterfaceOneInterfaceextendsCloneable{}这样做有什么好处呢?我想有一部分读者应该已经猜出来了,就是实现了 OneInterface 接口的类,也可以使用Object.clone()方法了。 publicclassTestInterfaceimplementsOneInterface{publicstaticvoidmain(String[]args)throwsCloneNotSupportedException{TestInterfac...
- 下一篇
IntelliJ 安装 Python 插件
运行 IntelliJ,然后在 IntelliJ 的设置中找到 插件。 然后在插件中搜索 Python 如果你没有安装的话,你应该是没有办法找到的。 你可以选择搜索 MarketPlace 选择官方的插件进行安装就可以了。 插件的安装正在进行中,你需要耐心等一下。 当插件安装完成后,你需要重启 IDE,让你安装的插件生效。 随后,你可以尝试使用 IntelliJ 创建一个新的项目。 如果你在新建项目中能够看到 Python 的选项,那么说明你 Python 的插件已经安装成功了。 插件在 IJ 中已经安装成功了。 https://www.ossez.com/t/intellij-python/114
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境