微信小程序 上传文件,小程序 文件上传

2022-07-31 14:47:16 分类：java 阅读()

　　微信小程序 上传文件,小程序 文件上传

　　00-1010 1.文件上传1.1后端部分1.2小程序前端部分1.3实现效果2。文件下载2.1后端部分2.2前端部分小程序2.3实现效果

　　

目录

 

　　00-1010 1.1.1介绍Apache Commons FIleUpload组件相关性

　　！-与文件上传和下载相关的依赖关系-依赖关系GroupID Commons-file upload/GroupID artifidcommons-file upload/artifidversion 1 . 3 . 3/Version/Dependency依赖关系GroupID Commons-IO/GroupID工件Commons-IO/工件ID Version 2.2/Version/Dependency 1 . 1 . 2设置上传文件大小限制

　　在application.yml(某些人可能会根据个人情况使用的属性)配置文件中添加以下参数：

　　1.1.3创建控制器

　　后端部分很简单，就是实现文件上传而已。学SpringMVC是可以的。

　　@ API operation( file upload )@ post mapping(/upload )公共字符串上传(http servlet请求request，@ request param (file )多部分文件file) throwsioexception {if(！file . isempty()){///上传文件路径//string path=request . getservletcontext()。get real path(/upload files/)；string path= e :/upload ；//获取上传文件名字符串filename=file . getoriginalfilename()；File filePath=新文件(路径File . separator fileName)；system . out . println(file path)；//如果文件目录不存在，则创建目录，如果(！filePath.getParentFile()。exists()){ file path . get parent file()。mkdirs()；}//将上传的文件保存到目标文件file . transfer to(file path)；返回“成功”；}返回‘失败’；}这里为了方便，我直接用绝对路径，这在生产环境中是不允许的。

　　00-1010wx.uploadfile (object)接口上传本地资源到开发者的服务器，客户端发起HTTPS Post请求，内容类型为multipart/form-data。上传之前需要获取本地(移动)资源，也就是在使用wx.uploadFile(OBJECT)之前，要调用其他接口获取要上传的文件资源。比如调用wx.chooseImage()接口获取本地图片资源的临时文件路径，然后通过wx.uploadFile(OBJECT)接口将本地资源上传到指定服务器。下表显示了wx.uploadFile()接口属性。

　　官网样本代码：

　　wx . choose image({ success(RES){ const tempfile paths=RES . tempfile paths wx . uploadfile({ URL 3360 https://example.weixin.qq.com/upload,//is只是一个例子，不是真正的接口地址filepath3360tempfilepaths [0

　　: file, formData: { user: test }, success (res){ const data = res.data //do something } }) }})真实的前端代码如下：

　　pages/uploadFile/uploadFile.wxml

　　

<!--index.wxml--><view class="container"> <button bindtap=upfile>选择上传文件</button></view>

pages/uploadFile/uploadFile.js

 

　　

//index.js//获取应用实例var app = getApp()Page({ data: { }, //事件处理函数 upfile: function() { console.log("--bindViewTap--") wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: http://127.0.0.1:8001/file/upload, header: { "Content-Type": "multipart/form-data" }, filePath: tempFilePaths[0], name: file, formData:{ }, success(res){ console.log(res.data); } }) } }) }, onLoad: function () { }})

 

　　

1.3 实现效果

编译之后：

 

　　

 

　　点击上传文件，随便选择一张图片

　　

 

　　

 

　　

 

　　可以看到，前端和后端项目的控制台都有对应的输出。

　　然后去对应的路径下面查找我们刚刚上传的文件

　　

 

　　

 

　　

2、文件下载

 

　　

2.1 后端部分

这里依赖和设置上传文件大小和上传部分一致，不重复了。

 

　　2.1.1 控制器

　　

 @ApiOperation("文件下载") @GetMapping("download") public ResponseEntity<byte[]> download(HttpServletRequest request,@RequestParam("file") String fileName) throws IOException { //下载文件路径 String path="E:/upload"; //构建将要下载的文件对象 File file = new File(path + File.separator + fileName); //设置响应头 HttpHeaders headers=new HttpHeaders(); //下载显示的文件名，解决中文名称乱码问题 String downloadFileName=new String(fileName.getBytes("UTF-8"),"ISO-8859-1"); //通知浏览器以下载方式(attachment)打开文件 headers.setContentDispositionFormData("attachment",downloadFileName); //定义以二进制流数据(最常见的文件下载)的形式下载返回文件数据 headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); //使用spring mvc框架的ResponseEntity对象封装返回下载数据 return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.OK); }

 

　　

2.2 小程序前端部分

wx.downloadFile(Object object)下载文件资源到本地(手机).客户端直接发起一个HTTPS GET请求，返回文件的本地临时路径。因为是临时路径，也就意味着用户不会直到真实的文件目录，所以下载到临时路径之后应该马上做后续的工作，例如把临时图片设置为头像，或者把临时文件通过别的接口真是保存到手机指定目录下。wx.downloadFile(Object object)参数如表所示。

 

　　

 

　　官网示例代码：

　　

 

　　下载的前端代码如下：

　　这里实现两个功能，一个实现把下载到的图片设置为头像，另一个将图片保存到手机本地。

　　pages/downloadFile/downloadFile.wxml

　　

<!--index.wxml--><view class="container"> <view bindtap="dian" class="userinfo"> <image class="userinfo-avatar" src="{{avatar}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <image src=http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg class="tu"></image> <view bindtap=dian2>下载上图</view> </view></view>

pages/downloadFile/downloadFile.js

 

　　

//index.js//获取应用实例var app = getApp()Page({ data: { motto: Hello World, userInfo: {}, avatar:null }, //事件处理函数 dian: function() { console.log("--bindViewTap--") var that = this; wx.downloadFile({ // url: https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3018968254,2801372361&fm=26&gp=0.jpg, url:http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg, type: image, success: function(res) { console.log(res) that.setData({avatar:res.tempFilePath}) } }) }, onLoad: function () { console.log(onLoad) var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }, dian2: function () { wx.downloadFile({ url:http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg, success: function (res) { console.log(res); var rr = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: rr, success(res) { wx.showToast({ title: 保存成功, icon: success, duration: 2000 }) } }) } }) }})

在函数dian()中调用了wx.downloadFile()接口，下载成功，图片就会保存在res.tempFilePath中，再把res.tempFilePath设置为头像。在函数dian2中，通过wx.saveImageToPhotosAlbum()接口把下载成功的图片保存到系统相册。

 

　　

 

　　

2.3 实现效果

 

　　这个图片是直接从服务器上下载的，可以点击下载将这个图片保存到本地

　　

 

　　到这里，文件上传和下载就基本做完了。其实大多数都是后端的事情，接口写好就没啥大问题。不放心的可以先用swagger测试。

　　所有接口文档均来自官网

　　以上就是SpringBoot+微信小程序实现文件上传与下载功能详解的详细内容，更多关于SpringBoot 小程序文件上传下载的资料请关注盛行IT其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签：

相关文章阅读

  • ,,详解微信小程序开发之formId使用（模板消息）
  • ,,微信小程序视图容器(swiper)组件创建轮播图
  • ,,微信小程序自定义toast弹窗效果的实现代码
  • ,,微信小程序的WXSS和全局、页面配置详细讲解
  • ,,微信小程序左右滚动公告栏效果代码实例
  • ,,微信小程序实现简易table表格
  • ,,微信小程序实现二维码签到考勤系统
  • ,,微信小程序中wxs文件的一些妙用分享
  • ,,微信小程序下拉刷新PullDownRefresh的使用方法
  • ,,微信小程序module.exports模块化操作实例浅析
  • ,,微信小程序canvas开发水果老虎机的思路详解
  • ,,微信小程序bindtap事件与冒泡阻止详解
  • ,,如何利用微信小程序和php实现即时通讯聊天功能
  • ,,java遇到微信小程序 "支付验证签名失败" 问题解决
  • python玩跳一跳,python跳一跳游戏代码,微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
    • 留言与评论（共有 条评论）
       
    验证码：