FC Barcelona Fan Token中文网
tdesign的文件上传功能实现(微信小程序+idea的springboot) |
|
发布日期：2025-01-02 12:40 点击次数：60 |
1. springboot后端
1.1 FileController.java
如上图可以看到，微信小程序的请求url要传来一个type值，
controller全部代码如下，直接复制粘贴就行：
1.2 listener文件的ErpApplicationListener.java
1.3 【重点！】FileServiceImpl层
以下代码不要直接复制粘贴到serviceImpl层，是原始代码，需要修改并添加一个引用才能使用
接下来教大家怎么修改文件
看不清楚没关系，如下图片是你唯一需要修改的地方
以下代码直接复制粘贴到FileServiceImpl
1.4 IFileService
1.5 StringUtil通用类
都是定义好的，复制粘贴就行
1.6 主程序加一个监听器
1.7 application.yml文件
只需要修改一下这里就行，是你oss的配置，我这里是阿里的oss
oss是什么和怎么创建看视频就行：
如何使用OSS控制台、ossutil、ossbrowser、OSSSDK_对象存储 OSS-阿里云帮助中心 (aliyun.com)
创建好了以后，对
以上2个文件都进行以下修改
2. 微信小程序端
2.1 TDesign的upload组件
TDesign的upload组件 (tencent.com)
https://tdesign.tencent.com/miniprogram/components/upload
1. app.json全局引用一下
2. wxml
如图可以看到mediaType中我只保留了模版中的image，bind:add事件我定义了一个handleCertificateAdd()，用于上传我的房屋产权图片，max修改为0，可以上传任意个图片
3. js
js页面主要修改了
1. data的数据：
定义一个数组 `certificateList:[ ]`就行
2. 【重点！】uploadFile(file,updateProgress,updateSuccess)方法
token
这个token就是数据库中的token的值
3. handleCertificateAdd()方法
遍历上传的所有图片，通过调用上面的uploadFile方法
下面来分析这几个红框中的代码
1.
2.
每个file都遍历调用uploadFile(file,updateProgress,updateSuccess)方法实现上传，
把方法体作为参数，回调，
方框中的方法，是uploadFile(file,updateProgress,updateSuccess)中的updateProgress参数
可以看到task的返回值参数res.progress为100
3.
如下图 方框中的方法，就是作为uploadFile(file,updateProgress,updateSuccess)中的updateSuccess参数
就是把图片的status属性设置为done，图片显示出来不会一直转圈
到此这篇关于tdesign的文件上传（微信小程序+idea的springboot）的文章就介绍到这了,更多相关微信小程序文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
|
|
|
|
