小程序多文件上传 Tdesign

众所周知，小程序文件上传还是有点麻烦的，其实主要还是小程序对的接口有诸多的不便，比如说，文件不能批量提交，只能一个个的提交，小程序的上传需要专门的接口。
普通的小程序的页面也比普通的HTML复杂很多

现在的我就对这个做一个记录：

页面使用的是T-design

页面更好看一点

且看代码

<t-uploadmedia-type="{{['video','image']}}"files="{{originFiles}}"gridConfig="{{gridConfig}}"bind:success="handleSuccess"bind:remove="handleRemove"bind:click="handleClick"/>

Page({/*** 页面的初始数据*/data: {originFiles: [],gridConfig: {column: 4,width: 160,height: 160,},config: {count: 1,},},
handleSuccess(e) {const { files } = e.detail;let that=this;files.forEach(item=>{request.upload("api/wxapp/upload",item).then(res=>{let resp = JSON.parse(res);//res返回的地址需要有{"url":"http://xxx"},这样的话回填也比较容易，不然的话，需要转换this.setData({originFiles: [...that.data.originFiles,resp.data],});});})},handleRemove(e) {const { index } = e.detail;const { originFiles } = this.data;//删除originFiles.splice(index, 1);this.setData({originFiles,});},handleClick(e) {console.log(e.detail.file);},})