1.

由于自己最近在搞微信小程序，然后要做一个上传商品的模块，当然就需要上传图片了，然而一开始网上查了好几天关于微信小程序上传图片到服务器的，但是一直没搞定，总是报错。最后在搜索的过程中看到了一句评论说“如果找不到错误的话那就重新做吧”，就是这句话启发了我，所以我决定不上网查别人的方法，而是自己查看官方提供的API自己摸索着尝试，结果还真的给做出来了。因为之前自己网上查找了许多文章都无法解决我的问题，因此我决定写下这篇文章，希望能帮到有需要的人吧。

2.

需要用到的接口

3.

1、选择图片接口

4.

首先看一下官方提供的API接口的参数说明

wx.chooseImage(OBJECT)5.

从本地相册选择图片或使用相机拍照。

6.

OBJECT参数说明：

参数类型必填说明countNumber否最多可以选择的图片张数，默认9sizeTypeStringArray否original原图，compressed压缩图，默认二者都有sourceTypeStringArray否album从相册选图，camera使用相机，默认二者都有successFunction是成功则返回图片的本地文件路径列表tempFilePathsfailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）7.

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用wx.saveFile，在小程序下次启动时才能访问得到。

8.

success返回参数说明：

参数类型说明最低版本tempFilePathsStringArray图片的本地文件路径列表tempFilesObjectArray图片的本地文件列表，每一项是一个File对象1.2.09.

File对象结构如下:

字段类型说明pathString本地文件路径sizeNumber本地文件大小，单位：B10.

示例代码：

wx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片vartempFilePathsres.tempFilePaths}})11.

结合上面的参数说明，看懂这段代码应该不难，不过就算看不懂也没什么关系，毕竟这只是官方提供的一个API。

12.

2、图片上传接口

wx.uploadFile(OBJECT)13.

将本地资源上传到开发者服务器。如页面通过wx.chooseImage等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。客户端发起一个HTTPSPOST请求，其中content-type为multipart/form-data。

14.

OBJECT参数说明：

参数类型必填说明urlString是开发者服务器urlfilePathString是要上传文件资源的路径nameString是文件对应的key,开发者在服务器端通过这个key可以获取到文件二进制内容headerObject否HTTP请求Header,header中不能设置RefererformDataObject否HTTP请求中其他额外的formdatasuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）15.

success返回参数说明：

参数类型说明dataString开发者服务器返回的数据statusCodeNumberHTTP状态码16.

示例代码：

wx.chooseImage({success:function(res){vartempFilePathsres.tempFilePathswx.uploadFile({url:'https://example.weixin.qq.com/upload',//仅为示例，非真实的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:function(res){vardatares.data//dosomething}})}})17.

同样的，结合上面提供的参数说明，这段代码要看懂也是不难的，主要就是需要知道这两段代码如何结合使用，也就是这篇文章主要的内容。

18.

选择图片以及上传图片

19.

这里页面我就不做多好看了。。。

20.

相应的代码：

textindex.wxml/textviewclass""formbindsubmit"uploadImg"labelbindtap"chooseImg"点击选择图片/labelimagesrc"{{photos}}"/imagebuttonform-type"submit"提交/button/form/view21.

其中image标签中src属性里面的{{photos}}参数则是选择图片后的图片的本地文件路径，就是说选择图片后则会在页面中显示该图片。

22.

当点击选择图片的label时则会调用chooseImg这个方法，也就是需要调用到官方的那个选择图片的接口，然后当点击提交按钮的时候，则会调用uploadImg这个方法，也就是需要调用到官方的那个上传图片的接口。

23.

1、选择图片

24.

index.js中的代码

//index.jsPage({/***页面的初始数据*/data:{photos:""},/***选择照片*/chooseImg:function(){varthatthiswx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片vartempFilePathsres.tempFilePathsthat.setData({photos:tempFilePaths})console.log(that.data.photos)}})}})25.

这里将官方提供的API封装到chooseImg这个方法中，就是当点击“点击选择图片”的label的时候就会调用该方法。

26.

同时在页面也会显示所选择的图片

27.

选择图片就已经完成了，接下来就是上传图片了。

28.

2、上传图片

29.

上传图片应该才是这篇文章的核心内容吧。。。

30.

uploadImg方法代码（同样在index.js中）：

/***上传照片*/uploadImg:function(){varthatthiswx.uploadFile({url:'http://localhost:8080/weshop/goods/upload',//仅为示例，非真实的接口地址filePath:that.data.photos[0],name:'file',formData:{'user':'黑柴哥'},success:function(res){vardatares.dataconsole.log(data)//dosomething}})}31.

这里的url就是Java后台的上传图片接口，实际可以更改为自己服务器的地址。

32.

下面开始介绍后台代码

importorg.apache.log4j.Logger;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importjavax.servlet.http.HttpServletRequest;importjava.io.File;importjava.io.IOException;/***商品信息页面跳转控制类*@authora柴大队长*@createtime2017年8月20日10:34:55*/@Controller@RequestMapping("goods")publicclassGoodsController{privateLoggerloggerLogger.getLogger(GoodsController.class);/***@createtime2017年8月20日17:15:41*@paramrequest*@paramfile*@return上传成功返回“success”，上传失败返回“error”*@throwsIOException*/@ResponseBody@RequestMapping("upload")publicStringupload(HttpServletRequestrequest,@RequestParam(value"file",requiredfalse)MultipartFilefile)throwsIOException{System.out.println("执行upload");request.setCharacterEncoding("UTF-8");logger.info("执行图片上传");Stringuserrequest.getParameter("user");logger.info("user:"+user);if(!file.isEmpty()){logger.info("成功获取照片");StringfileNamefile.getOriginalFilename();Stringpathnull;Stringtypenull;typefileName.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())){//项目在容器中实际发布运行的根路径StringrealPathrequest.getSession().getServletContext().getRealPath("/");//自定义的文件名称StringtrueFileNameString.valueOf(System.currentTimeMillis())+fileName;//设置存放图片文件的路径pathrealPath+"/uploads/"+trueFileName;logger.info("存放图片文件的路径:"+path);file.transferTo(newFile(path));logger.info("文件成功上传到指定目录下");}else{logger.info("不是我们想要的文件类型,请按要求重新上传");return"error";}}else{logger.info("文件类型为空");return"error";}}else{logger.info("没有找到相对应的文件");return"error";}return"success";}}33.

由于图片是以content-type为multipart/form-data的格式上传的，所以使用spring-mvc可以通过使用参数的形式以二进制的格式获取到该图片。

strong@RequestParam(value"file",requiredfalse)MultipartFilefile/strong34.

并且需要在spring-mvc.xml文件中加入以下代码：

!--文件上传配置--beanid"multipartResolver"class"org.springframework.web.multipart.commons.CommonsMultipartResolver"!--默认编码--propertyname"defaultEncoding"value"UTF-8"/!--上传文件大小限制为31M，31*1024*1024--propertyname"maxUploadSize"value"32505856"/!--内存中的最大值--propertyname"maxInMemorySize"value"4096"//bean35.

上传图片所需要添加的依赖为：

dependencygroupIdcommons-fileupload/groupIdartifactIdcommons-fileupload/artifactIdversion1.3.1/version/dependencydependencygroupIdcommons-io/groupIdartifactIdcommons-io/artifactIdversion2.4/version/dependencydependencygroupIdcommons-codec/groupIdartifactIdcommons-codec/artifactIdversion1.9/version/dependency36.

完成后，当点击“提交”按钮时则会上传图片到服务器。

37.

Java控制台输出代码：

执行upload[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-执行图片上传[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-user:黑柴哥[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-成功获取照片[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-图片初始名称为：tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg类型为：jpg[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-存放图片文件的路径:D:ProgramFilesApacheSoftwareFoundationTomcat7.0webappsweshop/uploads/1503221702072tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg[INFO][http-bio-8080-exec-7][2017-08-2017:35:02][com.wechat.weshop.controller.GoodsController]-文件成功上传到指定目录下38.

图片也上传到相应的位置了

39.

因此，发布到CentOS也是可以运行的。

40.

该文章到这里就结束啦！

41.

希望可以帮到需要的人~

42.

也欢迎大家留言探讨、问题反馈。

43.

同时附加一个博主的个人网站，其中涵盖了各种在线工具以及技术教程，https://miraclie.cn

44.

关于多图片上传以及SFTP图片服务器搭建的可参考《微信小程序多图片上传至SFTP服务器》