怎么在微信小程序中实现上传图片功能

　　介绍

这篇文章给大家介绍怎么在微信小程序中实现上传图片功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

wxml文件代码:

& lt; view 类=皐eui-cell"祝辞, 　　,& lt; view 类=皐eui-cell__bd"祝辞, 　　& lt;才能view 类=皐eui-uploader"祝辞, 　　& lt;才能view 类=皐eui-uploader__hd"祝辞, 　　& lt;才能view 类=皐eui-uploader__title"在营业执照& lt;/view>, 　　& lt;才能view 类=皐eui-uploader__info"在{{imageList.length}}/{{数[countIndex]}} & lt;/view>, 　　& lt;/view>才能, 　　& lt;才能view 类=皐eui-uploader__bd"祝辞, 　　& lt;才能view 类=皐eui-uploader__files"祝辞, 　　& lt;才能block 天气:为=皗{imageList}},,天气:项=癷mage"祝辞, 　　,,& lt; view 类=皐eui-uploader__file"祝辞, 　　,,& lt; image 类=皐eui-uploader__img", src=https://www.yisu.com/zixun/"{{映像}}" data-src="{{映像}}" bindtap=" previewImage "> 　　 　　块 　　 　　<视图类=" weui-uploader__input-box "> 　　<视图类=" weui-uploader__input“bindtap=" chooseImage "> 　　 　　 　　 　　 　　

js文件代码

chooseImage:, function  (), {, 　　,var  that =,,, 　　,console.log (& # 39; aaaaaaaaaaaaaaaaaaaa& # 39;), 　　, 　　wx.chooseImage({大敌; 　　,数:this.data.count (this.data.countIndex), 　　,成功:function  (res), {, 　　,console.log (& # 39; ssssssssssssssssssssssssss& # 39;), 　　,//缓存下, 　　wx.showToast({大敌; 　　标题:才能,& # 39;正在上传……& # 39;,, 　　图标才能:& # 39;加载# 39;,, 　　面具:才能,真的,, 　　时间才能:2000年,,, 　　,,成功:function (靓),{, 　　console.log才能(& # 39;成功加载动画& # 39;),, 　　,,}, 　　})大敌; 　　, 　　,console.log (res), 　　that.setData({大敌; 　　,,imageList: res.tempFilePaths  　　})大敌; 　　,//获取第一张图片地址, 　　,var  filep =, res.tempFilePaths [0], 　　,//向服务器端上传图片, 　　,//getApp .data.servsers(),这是在app.js文件里定义的后端服务器地址, 　　wx.uploadFile({大敌; 　　url:才能,getApp () .data.servsers  +, & # 39;/weixin/wx_upload.do& # 39;,, 　　,,filePath: filep,, 　　,,名字:& # 39;文件# 39;,, 　　{formData才能:还以为; 　　& # 39;才能用户# 39;:,& # 39;测试# 39;, 　　,,}, 　　,,成功:function  (res), {, 　　console.log才能(res), 　　console.log才能(res.data), 　　var 才能;瑞士=,JSON.parse (res.data), 　　var 才能;dizhi =, sss.dizhi;,//输才能出图片地址, 　　console.log才能(dizhi);, 　　,that.setData({大敌; 　　“dizhi"才能:,dizhi  　　}),才能 　　,//才能do  something  　　,,},失败:,function  (err), {, 　　console.log才能(err), 　　,,}, 　　,,}); 　　}大敌; 　　})大敌; 　　},大敌; 　　,previewImage: function  (e), {, 　　,var  current =, e.target.dataset.src  　　, 　　wx.previewImage({大敌; 　　, 　　,电流:电流、, 　　url:大敌;this.data.imageList  　　})大敌; 　　以前,}

java后端代码:

//获取当前日期时间的字符串类型用于文件名防重复, 　　,public  String 日期(){, 　　Date 才能;currentTime =, new 日期(),, 　　SimpleDateFormat 才能;formatter =, new  SimpleDateFormat (“yyyyMMddHHmmss");, 　　String 才能;dateString =, formatter.format (currentTime);, 　　dateString; return 才能; 　　}大敌; 　　,@RequestMapping (“wx_upload.do"), 　　,public  void  uploadPicture (HttpServletRequest 请求,,HttpServletResponse 响应,PrintWriter 作家),throws  Exception  {, 　　,System.out.println(“进入得到方法!“),, 　　,//获取从前台传过来得图片, 　　,MultipartHttpServletRequest  req =(MultipartHttpServletRequest)请求,, 　　,MultipartFile  MultipartFile =, req.getFile (“file");, 　　,//获取图片的文件类型, 　　,String  houzhu=multipartFile.getContentType (),, 　　,int  one =, houzhu.lastIndexOf (“/?, 　　,System.out.println (houzhu.substring ((1 + 1), houzhu.length ())),, 　　,System.out.println (multipartFile.getName ()), 　　,//根据获取到的文件类型截取出图片后缀, 　　,String  type=houzhu.substring ((1 + 1), houzhu.length ()),, 　　,System.out.println (multipartFile.getContentType ()), 　　, 　　,String 文件名; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在微信小程序中实现上传图片功能