微信小程序图片上传功能（提供前后端代码）

最近有项目要用到图片上传功能，记录一下。做这个功能之前，要先配置好图片服务器，这个我有时间再整理配置方法。

微信小程序端

微信小程序图片上传采用的是wx.uploadFile这个函数，需要提前在微信小程序的官网将域名加入到这个函数中，还需要注意的一点是，wx.uploadFile与wx.request两个如果放在同一个模块中实现，会出现不同步的问题，两个函数是同时运行的，也就是说图片上传的反馈还没回来，提交表单的代码就已经执行了。导致图片上传不了表单。所以在编写代码时最好在选择图片时，就上传图片，然后再将反馈回来的图片信息通过wx.request提交给表单。

//选择图片与上传uploadimg: function () {var that = this;var source = that.data.source;wx.chooseImage({  //从本地相册选择图片或使用相机拍照count: 9, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {//console.log(res)//前台显示that.setData({source: res.tempFilePaths})// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths// console.log(tempFilePaths)for (var i = 0; i < tempFilePaths.length; i++) {if (source.length >= 9) {that.setData({source: source});return false;} else {var imgurllist = that.data.imgurllist;// console.log(tempFilePaths.length)var count = 0;wx.uploadFile({url: 你的URLfilePath: tempFilePaths[i],name: 'uploadfile_ant',header: { "content-type": "application/json", "Cookie": "PLAY_SESSION=" + getApp().data.cookied },success: function (res) {count++;var imgmessage = JSON.parse(res.data)//  console.log(imgmessage.imgurl)if (imgmessage.state == "success") {that.setData({acjson: imgmessage.imgurl,imgurllist: imgmessage.imgurl,})imgurllist.push(imgmessage.imgurl);that.setData({imgurllist: imgurllist});//  console.log(that.data.imgurllist)} else {wx.hideLoading();}//如果是最后一张,则隐藏等待中  if (count == that.data.source.length) {wx.hideToast();}},fail: function (res) {wx.hideToast();wx.hideLoading();wx.showModal({title: '错误提示',content: '上传请假条失败',showCancel: false,success: function (res) {}})}});source.push(tempFilePaths[i]);}that.setData({source: source});}}})},//删除图片功能deleteImg: function (e) {var source = this.data.source;var index = e.currentTarget.dataset.index;source.splice(index, 1);var imgurllist = this.data.imgurllist;imgurllist.splice(index, 1);this.setData({source: source,imgurllist: imgurllist});},
//获取图片索引previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var source = this.data.source;wx.previewImage({//当前显示图片current: source[index],//所有图片urls: source})},

后台处理

后台使用的语言是Scala，可以用分布式文件系统——FastDFS用来保存图片，也可以直接在nginx配置图片服务器，在映射到本地，本次后面那种方法，

 def fastdfsupload = authAction.async(parse.multipartFormData) {request =>Future{if(request.userInfo.map(_.id.last).getOrElse(0)!=0){request.body.file("file").map { picture =>
//val filename = picture.filenameval contentType = filename.substring(filename.lastIndexOf("."))val furl= UUID.randomUUID.toString+contentTypepicture.ref.moveTo(new File(XwConstant.setimgurl+furl),replace = true).setReadOnly()val path1=XwConstant.httpsurl+XwConstant.getimgurl+furl// Runtime.getRuntime.exec("chmod 777 " + path1) //给文件夹权限if(picture.ref.length()<1024*1024){val pictype="#@#DSA"+picture.contentType.lastif(pictype.contains("#@#DSAimage/")){//val backurl=FastDFS.xbUpload(picture.ref,env.rootPath().getPath+"/conf/fdfs_client.conf",picture.filename.split('.').toList.last)  //这个是用了分布式文件系统——FastDFS  本次可以直接保存在本地的图片服务中，再在nginx配置好就可以了if(path1!="error"){Ok(Json.toJson(Map("state"->"success","imgurl"->path1)))}else{Ok(Json.toJson(Map("state"->"error1","msg"->"not found")))}}else{Ok(Json.toJson(Map("state"->"imageerror","msg"->"is not image")))}}else{Ok(Json.toJson(Map("state"->"error","msg"->"图片太大")))}}.getOrElse(Ok(Json.toJson(Map("state"->"error2","msg"->"p not found"))))}elseOk(Json.toJson(Map("state"->"error3","msg"->"u not found")))}}

路径文件

  /*** 保存img地址*/val setimgurl="E:/XXX/XXXX/tem/"/*** 获取路径地址*/val getimgurl="XXXX"/*** URL*/val httpsurl="你的IP地址"