本文记录在微信小程序中使用TDesign框架实现多文件上传的完整流程。涵盖从npm安装依赖、配置构建选项，到解决开发者工具中npm构建失败的常见错误。通过具体代码示例，演示如何配置t-upload组件处理图片和视频，并处理上传成功与移除的逻辑，帮助开发者快速落地企业级UI组件。
微信小程序多文件上传与TDesign集成方案
在小程序开发中，文件上传功能往往较为复杂，主要受限于平台接口的限制。例如，小程序不支持批量提交文件，必须逐个上传，且需要调用专门的上传接口。此外，小程序页面的开发复杂度通常高于普通HTML页面。
本文将对此进行详细记录。
页面开发采用TDesign框架。
该框架能使界面更加美观。
具体实现代码如下。
<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失败的问题
- 腾讯近期推出了TDesign企业级框架，在开发小程序时尝试引入该框架。按照官网指引操作时，却遇到了问题。
- TDesign官网链接
- 官网操作步骤
在项目根目录下执行npm安装依赖，命令如下：
npm i tdesign-miniprogram -S --production随后需在微信开发者工具中完成npm构建：依次点击
工具菜单，选择构建 npm。检查并移除
app.json文件中的"style": "v2"配置项。若需在项目中引入特定组件（如按钮），需在对应的JSON文件中配置自定义组件路径。
- 若希望全局导入，直接在项目根目录的
app.json文件中写入配置。 - 若为局部导入，则在
pages目录下具体组件的JSON文件中写入。
- 若希望全局导入，直接在项目根目录的
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}配置完成后，即可在wxml文件中直接使用组件。
<t-button type="primary">按钮</t-button>按上述流程操作理论上可正常使用，但在执行第二步构建时，常遇到持续报错导致构建失败，进而无法使用组件的情况。
经排查，只需在根目录的 project.config.json 文件中添加特定配置，再重新执行构建即可解决。
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
]
},至此，关于小程序多文件上传与TDesign集成的介绍完毕。如需了解更多相关内容，可搜索本站往期文章或浏览后续文章，感谢支持。