众所周知，小程序文件上传还是有点麻烦的，其实主要还是小程序对的接口有诸多的不便，比如说，文件不能批量提交，只能一个个的提交，小程序的上传需要专门的接口。
普通的小程序的页面也比普通的HTML复杂很多现在的我就对这个做一个记录：文章来源：https://www.toymoban.com/news/detail-765544.html
页面使用的是T-design
页面更好看一点
且看代码文章来源地址https://www.toymoban.com/news/detail-765544.html
<t-upload
media-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);
},
})
到了这里，关于小程序多文件上传 Tdesign的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
