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

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

微信小程序端

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

//选择图片与上传uploadimg:function(){varthatthis;varsourcethat.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属性显示图片vartempFilePathsres.tempFilePaths//console.log(tempFilePaths)for(vari0;itempFilePaths.length;i++){if(source.length9){that.setData({source:source});returnfalse;}else{varimgurllistthat.data.imgurllist;//console.log(tempFilePaths.length)varcount0;wx.uploadFile({url:你的URLfilePath:tempFilePaths[i],name:'uploadfile_ant',header:{"content-type":"application/json","Cookie":"PLAY_SESSION"+getApp().data.cookied},success:function(res){count++;varimgmessageJSON.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(countthat.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){varsourcethis.data.source;varindexe.currentTarget.dataset.index;source.splice(index,1);varimgurllistthis.data.imgurllist;imgurllist.splice(index,1);this.setData({source:source,imgurllist:imgurllist});},//获取图片索引previewImg:function(e){//获取当前图片的下标varindexe.currentTarget.dataset.index;//所有图片varsourcethis.data.source;wx.previewImage({//当前显示图片current:source[index],//所有图片urls:source})},后台处理

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

deffastdfsuploadauthAction.async(parse.multipartFormData){requestFuture{if(request.userInfo.map(_.id.last).getOrElse(0)!0){request.body.file("file").map{picture//valfilenamepicture.filenamevalcontentTypefilename.substring(filename.lastIndexOf("."))valfurlUUID.randomUUID.toString+contentTypepicture.ref.moveTo(newFile(XwConstant.setimgurl+furl),replacetrue).setReadOnly()valpath1XwConstant.httpsurl+XwConstant.getimgurl+furl//Runtime.getRuntime.exec("chmod777"+path1)//给文件夹权限if(picture.ref.length()1024*1024){valpictype"#@#DSA"+picture.contentType.lastif(pictype.contains("#@#DSAimage/")){//valbackurlFastDFS.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"-"notfound")))}}else{Ok(Json.toJson(Map("state"-"imageerror","msg"-"isnotimage")))}}else{Ok(Json.toJson(Map("state"-"error","msg"-"图片太大")))}}.getOrElse(Ok(Json.toJson(Map("state"-"error2","msg"-"pnotfound"))))}elseOk(Json.toJson(Map("state"-"error3","msg"-"unotfound")))}}路径文件

/***保存img地址*/valsetimgurl"E:/XXX/XXXX/tem/"/***获取路径地址*/valgetimgurl"XXXX"/***URL*/valhttpsurl"你的IP地址"