脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序多文件上传

微信小程序多文件上传 Tdesign及导入失败问题

 更新时间：2023年11月13日 09:47:20   作者：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的企业级框架，刚好在开发小程序想要使用下这个框架，于是打开官网，按照官网的操作却发现了问题
  • 附上官网链接 TDesign官网

官网操作步骤

在项目根目录下面使用npm安装依赖，执行npm i tdesign-miniprogram -S --production

需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm

将 app.json 中的 "style": "v2" 移除。

在项目的JSON 文件中引入某个组件，例如：按钮对应的自定义组件即可

  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }

接着就可以在 wxml 中直接使用组件

  <t-button type="primary">按钮</t-button>
  • 如果是全局导入直接在项目根目录app.json写入
  • 如果是局部导入在pages某个组件的json写入
  • 按照以上的操作流程按道理就可以使用了，但是再进行到第二步的时候出现问题了，在构建的时候一直提示如下，导致一直构建不成功，也一直无法使用。

后来发现只要在根目录的project.config.json里面添加如下配置,再执行构建就可以了。

    "setting": {
      "packNpmManually": true,
      "packNpmRelationList": [
        {
          "packageJsonPath": "./package.json",
          "miniprogramNpmDistDir": "./miniprogram"
        }
      ]
    },

到此这篇关于小程序多文件上传 Tdesign的文章就介绍到这了,更多相关Tdesign多文件上传 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论