E企盈小程序营销工具技术服务商 热线:4006-838-530

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

E企盈小程序直播系统

微信小程序图片上传功能(提供前后端代码)最近有项目要用到图片上传功能,记录一下。做这个功能之前,要先配置好图片服务器,这个我有时间再整理配置方法。微信小程序端微信小程序图片上传采用的是wx.uploadFile这个函数,需要提前在微信小程序的官网将域名加入到这个函数中,还需要注意的一点是,wx.uploadFile与wx.request两个如果放在同一个模块中实现,会出现不同步的问题,两个函数是同时运行的,也就是说图片上传的反馈还没回来,提交表单的代码就已经执行了。导致图片上传不了表单。所以在编写代码时最好在选择图片时,就上传图片,然后再将反馈回来的图片信息通过wx.request提交给表单。//选择图片与上传uploadimg:function(){varthat=this;varsource=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属性显示图片vartempFilePaths=res.tempFilePaths//console.log(tempFilePaths)for(vari=0;itempFilePaths.length;i++){if(source.length=9){that.setData({source:source});returnfalse;}else{varimgurllist=that.data.imgurllist;//console.log(tempFilePaths.length)varcount=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++;varimgmessage=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){varsource=this.data.source;varindex=e.currentTarget.dataset.index;source.splice(index,1);varimgurllist=this.data.imgurllist;imgurllist.splice(index,1);this.setData({source:source,imgurllist:imgurllist});},//获取图片索引previewImg:function(e){//获取当前图片的下标varindex=e.currentTarget.dataset.index;//所有图片varsource=this.data.source;wx.previewImage({//当前显示图片current:source[index],//所有图片urls:source})},后台处理后台使用的语言是Scala,可以用分布式文件系统——FastDFS用来保存图片,也可以直接在nginx配置图片服务器,在映射到本地,本次后面那种方法,deffastdfsupload=authAction.async(parse.multipartFormData){request=Future{if(request.userInfo.map(_.id.last).getOrElse(0)!=0){request.body.file(“file”).map{picture=//valfilename=picture.filenamevalcontentType=filename.substring(filename.lastIndexOf(“.”))valfurl=UUID.randomUUID.toString+contentTypepicture.ref.moveTo(newFile(XwConstant.setimgurl+furl),replace=true).setReadOnly()valpath1=XwConstant.httpsurl+XwConstant.getimgurl+furl//Runtime.getRuntime.exec(“chmod777″+path1)//给文件夹权限if(picture.ref.length()10241024){valpictype=”#@#DSA”+picture.contentType.lastif(pictype.contains(“#@#DSAimage/”)){//valbackurl=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”-“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地址”

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序上传图片,微信小程序图片上传功能提供前后端代码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏