微信小程序:多文件上传+java后台
2018-12-29 11:56
1001 查看
这两天一直在处理微信小程序,在处理上传文件这一块遇到了一些 难题,也是在网上这种查阅资料,最后终于把效果做了出来
微信小程序官方文档也是提供了专门上传文件的接口~~~
1.这是选中图片方法
/**上传图片 */ uploader: function () { var that = this; //小程序自带的选中图片接口 wx.chooseImage({ count: 5, //最多可以选择的图片总数 // 可以指定是原图还是压缩图,默认二者都有 sizeType: ['original', 'compressed'], // 可以指定来源是相册还是相机,默认二者都有 sourceType: ['album', 'camera'], success: function (res) { console.log(res); wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 500 }) //这里会拿到所有图片的路径,保存下来为后面 使用 var tempFilePaths = res.tempFilePaths that.setData({ tempFilePaths: tempFilePaths }) } },
2.这是上传后台接口
uploadFiles: function () { var that = this; //将保存的图片路径用来循环 if (that.data.tempFilePaths!=null){ for (var i = 0; i < that.data.tempFilePaths.length; i++) { //小程序自带的上传图片接口 wx.uploadFile({ url: path + '***/uploadImage', filePath: that.data.tempFilePaths[i], name: 'file', formData: { fileId: fileId }, header: { "Content-Type": "multipart/form-data" }, success: function (res) { console.log(res); }, fail: function (err) { console.log() } }) } }else{ console.log("没有上传图片") } },
3.wxml代码~~
<view class="img_in"> <view class='v1' wx:for="{{tempFilePath 26940 s}}" wx:key=""> <image src="{{item}}" mode="aspecFill" style="width: 200rpx; height: 200rpx" /> </view> <image src='../images/publish.jpg' style="width: 200rpx; height: 200rpx" bindtap="uploader">获取图片</image> </view>
4.最后是java的代码
@PostMapping(value = "/uploadImage") public ModelAndView uploadImage(HttpServletRequest request,String fileId) throws IOException { MultipartHttpServletRequest req =(MultipartHttpServletRequest)request; MultipartFile file= req.getFile("file"); System.out.println("进入方法!"+file); //获取文件名称的后缀信息 String fileOrginPath = file.getOriginalFilename(); //拆分文件路径信息 String[] ext1=fileOrginPath.split("\\."); String ext =fileOrginPath.split("\\.")[ext1.length-1]; if(StringUtils.isEmpty(fileName)){ fileName = System.currentTimeMillis()+""; } //获取文件名 fileName +="."+ext; //文件重命名 String pathName=sdf.format(new Date()); //项目文件存储地址 // String path = request.getServletContext().getRealPath(pathName); String path = "C:/***/" + pathName; //本地文件存储地址 //创建新的文件夹来保存图片 File newFile = new File(path); if(newFile.exists() == false){ newFile.mkdirs(); } newFile = new File(newFile, fileName); file.transferTo(newFile); return null; }
最后是 给你们看演示效果~~~
有什么不足或许要改进的地方 还请指出 谢谢~~
这样就可以把图片存进你指定位置啦~~是不是想想还是很简单的
相关文章推荐
- 微信小程序——多张图片上传(uploadFile) Java后台
- 微信小程序常见问题->上传文件后如何在后台(php)获取文件名解决方法
- 微信小程序常见问题->上传文件后如何在后台(php)获取文件名解决方法
- 微信小程序上传图片到服务器(java后台以及使用springmvc)
- 微信小程序wx.upload上传图片后台java
- 微信小程序上传图片 后台Java+spring接收
- 微信小程序文件上传java服务器端wx:uploadFile()
- java 附件上传时后台验证上传文件的合法性
- java linux和windows下文件路径间隔符的写法——解决linux下程序在windows下运行时的上传文件出错问题
- 微信小程序上传文件问题
- JAVA 程序实现文件到linux服务的上传与下载
- uploadify前台上传文件,java后台处理的例子
- java后台发起上传文件的post请求(http和https)
- 微信小程序 —— 上传文件到服务器(例:上传图片到服务器)
- [java后台]servlet对上传文件的处理
- Java 夹杂文本字段的文件上传 后台实现(包括前端jquery实现的备忘)
- Java后台模拟向Servlet发送POST文件上传请求
- 【总结】java 后台文件上传整理
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
- Form表单多文件上传(H5和Android && Java后台)