微信小程序上传图片到服务器(java后台以及使用springmvc)
来源:互联网 发布:安全期计算器软件 编辑:程序博客网 时间:2024/06/06 01:36
由于自己最近在搞微信小程序,然后要做一个上传商品的模块,当然就需要上传图片了,然而一开始网上查了好几天关于微信小程序上传图片到服务器的,但是一直没搞定,总是报错。最后在搜索的过程中看到了一句评论说“如果找不到错误的话那就重新做吧”,就是这句话启发了我,所以我决定不上网查别人的方法,而是自己查看官方提供的API自己摸索着尝试,结果还真的给做出来了。因为之前自己网上查找了许多文章都无法解决我的问题,因此我决定写下这篇文章,希望能帮到有需要的人吧。
需要用到的接口
1、选择图片接口
首先看一下官方提供的API接口的参数说明
wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT参数说明:
注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。
success返回参数说明:
File 对象结构如下:
示例代码:
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths }})结合上面的参数说明,看懂这段代码应该不难,不过就算看不懂也没什么关系,毕竟这只是官方提供的一个API。
2、图片上传接口
wx.uploadFile(OBJECT)
将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中content-type
为multipart/form-data
。
OBJECT参数说明:
success返回参数说明:
示例代码:
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } }) }})同样的,结合上面提供的参数说明,这段代码要看懂也是不难的,主要就是需要知道这两段代码如何结合使用,也就是这篇文章主要的内容。
选择图片以及上传图片
这里页面我就不做多好看了。。。
相应的代码:
<text>index.wxml</text><view class=""> <form bindsubmit="uploadImg"> <label bindtap="chooseImg">点击选择图片</label> <image src="{{photos}}"></image> <button form-type="submit">提交</button> </form></view>其中image标签中src属性里面的{{photos}}参数则是选择图片后的图片的本地文件路径,就是说选择图片后则会在页面中显示该图片。
当点击选择图片的label时则会调用chooseImg这个方法,也就是需要调用到官方的那个选择图片的接口,然后当点击提交按钮的时候,则会调用uploadImg这个方法,也就是需要调用到官方的那个上传图片的接口。
1、选择图片
index.js中的代码
// index.jsPage({ /** * 页面的初始数据 */ data: { photos: "" }, /** * 选择照片 */ chooseImg: function() { var that = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths that.setData({ photos: tempFilePaths }) console.log(that.data.photos) } }) }})
这里将官方提供的API封装到chooseImg这个方法中,就是当点击“点击选择图片”的label的时候就会调用该方法。
同时在页面也会显示所选择的图片
选择图片就已经完成了,接下来就是上传图片了。
2、上传图片
上传图片应该才是这篇文章的核心内容吧。。。
uploadImg方法代码(同样在index.js中):
/** * 上传照片 */ uploadImg: function() { var that = this wx.uploadFile({ url: 'http://localhost:8080/weshop/goods/upload', //仅为示例,非真实的接口地址 filePath: that.data.photos[0], name: 'file', formData: { 'user': '黑柴哥' }, success: function (res) { var data = res.data console.log(data) //do something } }) }
这里的url就是Java后台的上传图片接口,实际可以更改为自己服务器的地址。
下面开始介绍后台代码
import org.apache.log4j.Logger;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;/** * 商品信息页面跳转控制类 * @author a柴大队长 * @createtime 2017年8月20日10:34:55 */@Controller@RequestMapping("goods")public class GoodsController { private Logger logger = Logger.getLogger(GoodsController.class); /** * @createtime 2017年8月20日17:15:41 * @param request * @param file * @return 上传成功返回“success”,上传失败返回“error” * @throws IOException */ @ResponseBody @RequestMapping("upload") public String upload(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) throws IOException { System.out.println("执行upload"); request.setCharacterEncoding("UTF-8"); logger.info("执行图片上传"); String user = request.getParameter("user"); logger.info("user:"+user); if(!file.isEmpty()) { logger.info("成功获取照片"); String fileName = file.getOriginalFilename(); String path = null; String type = null; type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null; logger.info("图片初始名称为:" + fileName + " 类型为:" + type); if (type != null) { if ("GIF".equals(type.toUpperCase())||"PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) { // 项目在容器中实际发布运行的根路径 String realPath = request.getSession().getServletContext().getRealPath("/"); // 自定义的文件名称 String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName; // 设置存放图片文件的路径 path = realPath + "/uploads/" + trueFileName; logger.info("存放图片文件的路径:" + path); file.transferTo(new File(path)); logger.info("文件成功上传到指定目录下"); }else { logger.info("不是我们想要的文件类型,请按要求重新上传"); return "error"; } }else { logger.info("文件类型为空"); return "error"; } }else { logger.info("没有找到相对应的文件"); return "error"; } return "success"; }}
由于图片是以content-type为multipart/form-data的格式上传的,所以使用spring-mvc可以通过使用参数的形式以二进制的格式获取到该图片。
@RequestParam(value = "file", required = false) MultipartFile file
并且需要在spring-mvc.xml文件中加入以下代码:
<!-- 文件上传配置 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 默认编码 --> <property name="defaultEncoding" value="UTF-8"/> <!-- 上传文件大小限制为31M,31*1024*1024 --> <property name="maxUploadSize" value="32505856"/> <!-- 内存中的最大值 --> <property name="maxInMemorySize" value="4096"/> </bean>
上传图片所需要添加的依赖为:
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency>
完成后,当点击“提交”按钮时则会上传图片到服务器。
Java控制台输出代码:
执行upload[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 执行图片上传[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - user:黑柴哥[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 成功获取照片[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 图片初始名称为:tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg 类型为:jpg[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 存放图片文件的路径:D:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\weshop\/uploads/1503221702072tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 文件成功上传到指定目录下
图片也上传到相应的位置了
最后将代码发布到CentOS上测试是否成功,也就是将url中的localhost:8080更改为服务器的地址。
上传后通过ls查看uploads文件夹下的文件
[root@iZi1ozk35hjgizZ uploads]# ls1503222548424tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMccdc2a843464cd3c3ae2d3c79a2b181a7.jpg
以及查看日志文件信息
因此,发布到CentOS也是可以运行的。
该文章到这里就结束啦!
希望可以帮到需要的人~
也欢迎大家留言探讨、问题反馈。
- 微信小程序上传图片到服务器(java后台以及使用springmvc)
- springMVC使用jersey上传图片到图片服务器
- 图片使用base64图片数据格式上传(后台使用springMVC)
- 微信小程序上传图片到服务器
- 微信小程序 —— 上传文件到服务器(例:上传图片到服务器)
- 搭建图片服务器《四》:后台java代码springMVC+spring实现图片上传
- springMVC上传图片,前台JS ,后台JAVA
- SpringMvc异步图片上传回显(使用jersey上传到另一台服务器)
- android使用AsyncHttpClient上传图片以及参数到服务器
- Android Base64上传图片到 SpringMVC服务器
- Android Base64上传图片到 SpringMVC服务器
- Java上传图片到服务器
- java 上传图片到服务器
- java 使用SpringMVC上传图片
- Java前端上传图片到后台
- 微信小程序wx.upload上传图片后台java
- java使用FTPClient 上传图片文件到服务器
- 使用jersey上传图片到图片服务器
- 熊不是一般的熊—自我养成记
- Merge into语句的使用
- 运行时异常和编译时异常
- Semi-supervised learning
- synchronized的使用和底层实现原理
- 微信小程序上传图片到服务器(java后台以及使用springmvc)
- HDU6156-Palindrome Function
- centos7安装mysql
- SpringMVC + JSONP的跨域请求
- 小仙女大梦想
- HDU 6156 Palindrome Function 经典数位DP
- C#的float,double和decimal
- Git笔记
- 字符串概述