小程序多文件上传 Tdesign的过程

 更新时间:2023年11月22日 10:58:06   作者:xuxiaoxie  
众所周知,小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,现在给大家分享小程序多文件上传 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS错误处理与调试操作实例分析

    JS错误处理与调试操作实例分析

    这篇文章主要介绍了JS错误处理与调试操作,结合实例形式分析了JavaScript错误捕获、处理、调试工具、断点调试等相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 详解微信小程序的不同函数调用的几种方法

    详解微信小程序的不同函数调用的几种方法

    这篇文章主要介绍了微信小程序的不同函数调用的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)

    TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)

    .d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧
    2023-09-09
  • js判断屏幕分辨率的代码

    js判断屏幕分辨率的代码

    由于现在的很多用户的分辨率问题,导致很多广告会遮挡内容或者对于不同分辨率的用户不同的css样式,就可以参考下面的代码
    2013-07-07
  • 基于Flowplayer打造一款免费的WEB视频播放器附源码

    基于Flowplayer打造一款免费的WEB视频播放器附源码

    Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。下面本篇文章给大家介绍基于Flowplayer打造一款免费的WEB视频播放器,需要的朋友可以参考下
    2015-09-09
  • JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

    JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

    最近在看JavaScript高级程序设计(第三版),面向对象一章20多页,来来回回看了三五遍,每次看的收获都不一样
    2012-07-07
  • Bootstrap下拉菜单更改为悬停(hover)触发的方法

    Bootstrap下拉菜单更改为悬停(hover)触发的方法

    这篇文章主要为大家详细介绍了Bootstrap下拉菜单更改为悬停(hover)触发的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript实现三级联动菜单效果

    JavaScript实现三级联动菜单效果

    这篇文章主要为大家详细介绍了三级联动菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS中frameset框架弹出层实例代码

    JS中frameset框架弹出层实例代码

    这篇文章主要介绍了JS中frameset框架弹出层实例代码 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 基于AGS JS开发自定义贴图图层

    基于AGS JS开发自定义贴图图层

    这篇文章主要为大家详细介绍了基于AGS JS开发自定义贴图图层的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论