1.小程序wxml:

 <view><view>准备上传的图片</view><image class="ph" src="{{photoold}}" mode="aspectFit"></image><view><button bindtap="chooseImage" size="mini" type="primary">选择图片</button><button bindtap="uploadImage" size="mini"type="primary" >上传图片</button></view><view>上传后从服务器获取的图片</view><image class="ph" src="https://www.ssdnnc.xyz/{{photonew}}" mode="aspectFit"></image></view>

2.小程序JS:

// pages/instructions/instructions.js
Page({/*** 页面的初始数据*/data: {myopenid:"",photoold:"",photonew:""},//选择图片
chooseImage :function(e){var that = this;wx.chooseImage({success(res){that.setData({photoold:res.tempFilePaths[0]})}})
},
uploadImage :function(e){var that =this;console.log("openid:",that.data.myopenid);console.log("filePath:",that.data.photoold);wx.uploadFile({filePath: that.data.photoold,// 参数名和接口一致name: 'file',url: 'https://www.aaaaa.xyz/user/uploadpicture',formData:{'myopenid': that.data.myopenid,}, success(res){console.log(res.data)that.setData({photonew:res.data+"?temp="+new Date().getTime()})wx.showToast({title: '图片上传成功',icon: 'success',duration: 2000})},fail(res){console.log(res)wx.showToast({title: '图片上传失败',icon: 'error',duration: 2000})}})
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({ myopenid : options.myopenid,})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

3.Java后端

 //用户上传图片@RequestMapping("/uploadpicture")@ResponseBodypublic String upload2(@RequestParam("file") MultipartFile file , HttpServletRequest request) throws IOException {//上传路径保存设置String openid = request.getParameter("myopenid");System.out.println("openid："+openid);if(openid!=null){String uploadFileName = file.getOriginalFilename();uploadFileName=openid+getFileType(uploadFileName);System.out.println("上传文件名："+uploadFileName);//上传路径保存设置//String path = request.getSession().getServletContext().getRealPath("/userpicture/");//写死了，和nginx配置文件里一致String path = "/usr/local/webserver/nginx/image";File realPath = new File(path);if(!realPath.exists()){realPath.mkdir();}System.out.println("上传文件保存地址："+realPath);InputStream is = file.getInputStream();//文件输入流OutputStream os = new FileOutputStream(new File(realPath,uploadFileName));//文件输出流//读取写出int len=0;byte[] buffer = new byte[1024];while((len=is.read(buffer))!=-1){os.write(buffer,0,len);os.flush();}os.close();is.close();return uploadFileName;}else{return "上传失败！";}}

4.Nginx

      location ~ .(jpg|png|jpeg|gif|bmp)$ {root /usr/local/webserver/nginx/image;autoindex on;expires 1h;}

5.演示

6.存在的坑

小程序页面如果多次请求的图片地址相同，图片不会自动更新，清除缓存也没用

解决办法：在URL后面加上时间戳

that.setData({photonew:res.data+"?temp="+new Date().getTime()})

微信小程序上传图片到Java后端相关推荐

深入讲解微信小程序上传图片与JAVA后台的结合
背景微信小程序上传文件是微信小程序提供的API之一,如果用JAVA后台如何来处理上传的文件呢? 官方文档 UploadTask wx.uploadFile(Object object) 将本地资源上 ...
微信小程序支付（java后端）
微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: idea+springclou ...
微信小程序上传图片(前端+PHP后端)
一.wxml文件 1 2 3 4 5 6 7 <text>上传图片</text> <view> <button bindtap="uploadimg ...
微信小程序开发【前端+后端（Java）】附完整源码，拿来接私活简直不要太香
一.前言现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,所以现在用这篇博客记录我之前开发的一些经验和一些心得吧. 二.主要内 ...
微信小程序商城 (后台JAVA)
微信小程序商城(Java版) 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 mybatis3.4.1 1.3 shiro1.3.2 1.4 se ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
【项目实战课】微信小程序图像识别模型前后端部署实战
欢迎大家来到我们的项目实战课,本期内容是<微信小程序图像识别模型前后端部署实战>.所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题,进行代码级的实战讲解. ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...

微信小程序上传图片到Java后端

1.小程序wxml:

2.小程序JS:

3.Java后端

4.Nginx

5.演示

6.存在的坑

小程序页面如果多次请求的图片地址相同，图片不会自动更新，清除缓存也没用

解决办法：在URL后面加上时间戳

微信小程序上传图片到Java后端相关推荐

最新文章

热门文章