小程序多文件上传 Tdesign的过程
小程序多文件上传 Tdesign
众所周知,小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口。
普通的小程序的页面也比普通的HTML复杂很多现在的我就对这个做一个记录:
页面使用的是T-design
页面更好看一点

且看代码
<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的文章就介绍到这了,更多相关小程序多文件上传 Tdesign内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)
.d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧2023-09-09
基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。下面本篇文章给大家介绍基于Flowplayer打造一款免费的WEB视频播放器,需要的朋友可以参考下2015-09-09
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
最近在看JavaScript高级程序设计(第三版),面向对象一章20多页,来来回回看了三五遍,每次看的收获都不一样2012-07-07
Bootstrap下拉菜单更改为悬停(hover)触发的方法
这篇文章主要为大家详细介绍了Bootstrap下拉菜单更改为悬停(hover)触发的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05


最新评论