微信小程序上传图片到服务器(java后台以及使用springmvc)
由于自己最近在搞微信小程序,然后要做一个上传商品的模块,当然就需要上传图片了,然而一开始网上查了好几天关于微信小程序上传图片到服务器的,但是一直没搞定,总是报错。最后在搜索的过程中看到了一句评论说“如果找不到错误的话那就重新做吧”,就是这句话启发了我,所以我决定不上网查别人的方法,而是自己查看官方提供的API自己摸索着尝试,结果还真的给做出来了。因为之前自己网上查找了许多文章都无法解决我的问题,因此我决定写下这篇文章,希望能帮到有需要的人吧。
需要用到的接口
1、选择图片接口
首先看一下官方提供的API接口的参数说明
wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
count | Number | 否 | 最多可以选择的图片张数,默认9 |
sizeType | StringArray | 否 | original 原图,compressed 压缩图,默认二者都有 |
sourceType | StringArray | 否 | album 从相册选图,camera 使用相机,默认二者都有 |
success | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。
success返回参数说明:
参数 | 类型 | 说明 | 最低版本 |
---|---|---|---|
tempFilePaths | StringArray | 图片的本地文件路径列表 | |
tempFiles | ObjectArray | 图片的本地文件列表,每一项是一个 File 对象 | 1.2.0 |
File 对象结构如下:
字段 | 类型 | 说明 |
---|---|---|
path | String | 本地文件路径 |
size | Number | 本地文件大小,单位:B |
示例代码:
wx.chooseImage({count: 1, // 默认9sizeType: ['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参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器 url |
filePath | String | 是 | 要上传文件资源的路径 |
name | String | 是 | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
header | Object | 否 | HTTP 请求 Header , header 中不能设置 Referer |
formData | Object | 否 | HTTP 请求中其他额外的 form data |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success返回参数说明:
参数 | 类型 | 说明 |
---|---|---|
data | String | 开发者服务器返回的数据 |
statusCode | Number | HTTP状态码 |
示例代码:
wx.chooseImage({success: function(res) {var tempFilePaths = res.tempFilePathswx.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.js
Page({/*** 页面的初始数据*/data: {photos: ""},/*** 选择照片*/chooseImg: function() {var that = thiswx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.setData({photos: tempFilePaths})console.log(that.data.photos)}})}
})
这里将官方提供的API封装到chooseImg这个方法中,就是当点击“点击选择图片”的label的时候就会调用该方法。
同时在页面也会显示所选择的图片
选择图片就已经完成了,接下来就是上传图片了。
2、上传图片
上传图片应该才是这篇文章的核心内容吧。。。
uploadImg方法代码(同样在index.js中):
/*** 上传照片*/uploadImg: function() {var that = thiswx.uploadFile({url: 'http://localhost:8080/weshop/goods/upload', //仅为示例,非真实的接口地址filePath: that.data.photos[0],name: 'file',formData: {'user': '黑柴哥'},success: function (res) {var data = res.dataconsole.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可以通过使用参数的形式以二进制的格式获取到该图片。
<strong>@RequestParam(value = "file", required = false) MultipartFile file</strong>
并且需要在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]# ls
1503222548424tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMccdc2a843464cd3c3ae2d3c79a2b181a7.jpg
以及查看日志文件信息
因此,发布到CentOS也是可以运行的。
该文章到这里就结束啦!
希望可以帮到需要的人~
也欢迎大家留言探讨、问题反馈。
同时附加一个博主的个人网站,其中涵盖了各种在线工具以及技术教程,https://miraclie.cn
关于多图片上传以及SFTP图片服务器搭建的可参考《微信小程序多图片上传至SFTP服务器》
微信小程序上传图片到服务器(java后台以及使用springmvc)相关推荐
- 微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
- 微信小程序支付-付款(Java后台)
微信小程序支付-付款(Java后台) 一.概述 接触微信小程序支付有一段时间,趁着项目上线空闲期,来总结一下付款.退款.提现到银行卡.查询流水等步骤过程,涉及到的知识,以及编程过程中需要注意的问题. ...
- 【程序源代码】微信小程序商城管理系统(Java后台+微信小程序)最新版
关键字:微信小程序 商城系统 02 - [技术框架] 微信小程序商城管理系统(Java后台+微信小程序) 基于Spring+Vue+Mysql+Redis主流技术开发框架集成开发的微信商场管理系统:其 ...
- 微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
- 微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
- 微信小程序登录状态维护-java后台
先上一张小程序官方的登录时序图(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html) ...
- 微信小程序之前端与java后台进行数据交互
后台是用SpringBoot+SSM来写的,整体上来说,和普通的Web没什么区别 要注意的是,对于小程序访问的控制层方法,需要返回一个Map类型 @RequestMapping(value = &qu ...
- 微信小程序上传图片,web api后台接收(完全版)
插播一条广告:软件设计师考试系统: 本人自己开发的网址: http://94.191.14.138:8025/Html/Customer/Main.html#/Index 今天花了一天时间,研究了微信 ...
- java微信上传图片_微信小程序图片上传java后台(前后端代码)
小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...
- 微信小程序获取手机号,java后台
获取小程序的手机号,指的是获取绑定用户微信的手机号码,细节什么的我就不多说了,官网说的很详细了 官网:https://developers.weixin.qq.com/miniprogram/dev/ ...
最新文章
- Spring Boot 2.x基础教程:使用@Scheduled实现定时任务
- javascript加载顺序问题(二)
- Logon failed, use ctrl+c to cancel basic credential prompt. 错误
- hadoop记录篇10-数据仓库查询组件impala
- 3.4. Wireless Networking
- JZOJ 3819. 【NOI2015模拟9.9】取石子
- MySQL之日期时间处理函数_MySQL之日期时间处理函数
- 在Spring Boot中使用Vaadin的简介
- C++学习之路 | PTA乙级——1092 最好吃的月饼 (20 分)(精简)
- PHP即将退出,PHP4即将退出历史舞台
- android自定义图片加载,Android自定义ProgressDialog加载图片
- java编码规范文档 下载_软件项目实训及课程设计指导——制定待开发项目中各种文档的规范...
- docker部署express项目
- pdf转swf linux,Linux环境安装配置Swftools,pdf转swf工具
- 【Gym-100837E】Optimal Rest【完全背包】
- mac vulkan_在 macOS 上开发 Vulkan 程序
- H5实现移动端,PC端页面分享
- php怎么画五星红旗,php基于GD库画五星红旗的方法,phpgd库五星红旗
- 手动压缩Outlook PST和OST文件
- Sketch(三)——插件
热门文章
- 用WinRAR分割文件
- IE CSS样式的兼容性问题
- 3.8 main.js-常用配置【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】
- 视频转mp3格式转换器怎么使用
- 乌镇里的AI || 新芒X
- mysql secure file_mysql load data secure-file-priv问题
- 三线压力传感器原理_压力传感器怎么接线 每根线都是干什么的
- 斯坦福大学自然语言处理第七课“情感分析(Sentiment Analysis)”
- in作为介词的用法_介词at和in表示地点时的各自用法
- TCP 三次握手和四次挥手,中间失败了会发生什么?